如果所有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示例 ；