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

Question

我有一个类为.display_noti的div ，并且在其中append另一个类为.palnotific的div我从数据库中获取了数据，并将获取的数据转换为json_encode 。我使用了json格式的数据并做了一些信息在该div上append了.palnotific类。

我的第一个jquery代码将.display_noti数据附加到类.display_noti看起来像：-

  $.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中的表单从输入中使用。

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

  } 
  });

});

上面的代码从先前从jquery附加的.palnotific div内的格式中获取输入值。如您所知，这些附加的div通过json_encode从数据库中获取数据。它将取值与数据库中的可用值相同，这意味着数据库中有2个数据json_encode也将有2个数据，那些从json_encode中获取数据的append div类将在div上添加2次具有palnotific类的palnotific 。现在，我的问题是，如果我有两个div， palnotifi源是palnotifi类click函数仅适用于第一个div，并且当我单击第二个div时， onclick函数不起作用。无论我是否有2个或更多，如果我单击任何一个div的第一个div click函数都会起作用，则两个div起作用。如何使onclick起作用仅对那些已单击的div功能？

Answer 1

使jquery对动态创建的元素做出反应的最简单方法是将事件附加到该元素本身。 另一种方法是on带有子过滤器的容器div上使用，但是由于您已经在创建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);
        })
});

小提琴的例子

在此示例中，id也是事先存储的，并在附加的点击中重新使用。 如果您需要使用原始值，则可以使用$(this).find('.palid').val() （就像在小提琴中所做的那样）

Answer 2

从您粘贴的代码中，问题应该是此行：

var pid=x.val(); 

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

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

Answer 3

您可以在on()函数中使用更特定的CSS3选择器 。 我不确定这是否可以解决您的整体问题，但可能会引导您朝正确的方向发展。

$(".display_noti").on("click", ".palnotific:first", function(event) {
  console.log("You Clicked: ", event.target.id);
});

这是一个JSFiddle示例 ；