javascript - 如果所有div都具有相同的类，如何从jquery单击事件的多个div中选择一个div？

Question

我有一个带有类.display_noti的div，在它里面我有append另一个带有类的div .palnotific by jquery。我已经从数据库中获取了数据，并将获取的数据转换为json_encode。我使用了该json格式数据并制作了一些附加的信息 位于带有类 .palnotific 的 div 上。

我的第一个 jquery 代码使用 .display_noti 类在该 div 中附加数据，如下所示:-

  $.getJSON("notification.php",function(data){  
    // you can do checking here
    if ( data.result && data.result.length > 0 ) {
       $(".display_noti").empty(); // Clear out the div  
       $.each(data.result,function(){  
         $(".display_noti").append("<div class='palnotific'>You got a pal requet from <strong>"+this['from_user']+"</strong><br><span class='date'>"+this['notification_date']+"<form method='post'><input type='text' class='palid' value='"+this['pals_id']+"'></form></div>");
       }); 
       done();
    }
    else {
          $(".display_noti").append("<div class='palnotific' style='background-color:white;'>You have no notification to view.</div>");
    } 

在上面，我首先获取了 json 格式数据，并进行了一些验证，最后我将带有类 .palnotific 的第二个 div 附加到带有类 .display_noti 的第一个 div 中 code>.我在附加 div 中有一个表单，我用它从输入中获取值以供使用。

众所周知，.palnotific 是一个附加的 div。我想在其上使用一些 Onclick 事件函数，因此，我使用了以下代码:-

   $('body').on('click','.palnotific',function(){
   var x = $(this).closest('.display_noti').find('.palid');
   var pid=x.val();  
  $.ajax({
    url:'notifipro.php',
    type:'post',
    data:"palid="+pid,
    success: function(data){
      if(data==1)
        {
         $(window).load('oldpage.php');
        }
      if(data==2)
         {
            $(window).load('newpage.php');
         } 

  } 
  });

});

上面的代码从 .palnotific div 中的表单中获取输入值，该 div 是之前从 jquery 附加的。如您所知，这些附加的 div 通过 json_encode< 从数据库携带数据。/code>。它将获取数据库中可用的尽可能多的值，这意味着如果数据库中有 2 个数据，json_encode 也将有 2 个数据，而那些从 json_encode 获取数据的附加 div 类将使用类 附加该 div 的 2 倍palnotific。现在我的问题是，如果我有两个带有 palnotifici 类来源的 div，则附加我的点击功能仅适用于第一个 div，当我点击第二个 div onclick 功能不起作用。无论我有 2 个或更多，然后两个 div，如果我单击任何一个 div，第一个 div 单击功能就会执行操作。我怎样才能使 onclick 功能仅作用于这些 div哪些已被点击？

Answer 1

让 jquery 对动态创建的元素使用react的最简单方法是将事件附加到该元素本身。另一种方法是在带有子过滤器的容器 div 上使用 on ，但由于您已经创建了 html，因此您可以将其封装在 $('yourhtml') 中并将单击直接附加到创建的元素。结合appendTo而不是追加，您还可以链接追加并单击:

//mock data:
var data={result: [
          {from_user: 'A',  notification_date: new Date(), pals_id: 1},
          {from_user: 'B',  notification_date: new Date(), pals_id: 2},
          {from_user: 'C',  notification_date: new Date(), pals_id: 3} 
]};


$.each(data.result,function(){  
        var id = this.pals_id;
         $("<div class='palnotific'>You got a pal request from <strong>"+this['from_user']+"</strong><br><span class='date'>"+this['notification_date']+"<form method='post'><input type='text' class='palid' value='"+ id +"'></form></div>")
         .appendTo(".display_noti")
         .click(function(){
             //attach pre existing function or assign your logic here
            alert('You clicked '  + id);
        })
});

Example fiddle

在此示例中，ID 也已预先存储并在附加的点击中重复使用。如果需要使用原始值，可以使用 $(this).find('.palid').val() (如 this fiddle 中所做的那样)