在jquery click事件中，如果所有div都有相同的类，如何从多个div中选择一个div？

Question

我有一个带有类.display_noti的div并且在它里面有一个append另一个带有类.palnotific的div。我从数据库中提取了数据，并将提取的数据转换为json_encode。我使用了那个json格式的数据，并在那个带有类.palnotific的div上生成了一些信息，这些信息是append。

我第一个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中附加了第二个div并用类.display_noti。

我们知道.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');
         } 

  } 
  });

});

上面的代码从.palnotificdiv中的表单中获取输入值，该表单是以前从jquery中追加的。正如您所知，那些追加的div通过json_encode从数据库中携带数据。它将获取数据库中可用的值，这意味着如果数据库中有2个数据，json_encode也将有2个数据，并且那些从json_encode中获取数据的append div类将用一个类palnotific追加2次该div。现在我的问题是，如果我有两个div的类palnotifi来自当我单击第二个div时，onclick函数不起作用。无论我有2个或更多的div但如果我单击任何一个div第一个div click函数采取行动。我如何使workonclick函数只对那些已经单击的div？

Answer 1

从你粘贴的代码来看，问题应该出在这一行：

var pid=x.val(); 

您可以在jQuery文档（http://api.jQuery.com/val/）中找到

.val（）获取匹配元素集合中第一个元素的当前值或设置每个匹配元素的值。

Answer 2

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

//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);
        })
});

小提琴示例

在本例中，id也是预先存储的，并在附加的click中重用。如果需要使用原始值，可以使用$(this).find('.palid').val()（如在this fiddle中所做的那样）