Question

我有一个div，其中包含.display_noti类，其中我有append另一个div，其中.palnotific类由jquery提供。我已从中获取数据数据库和i将获取的数据转换为json_encode。我使用了json格式数据，并在该div上使用append一些.palnotific信息。

我的第一个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格式的数据，然后我做了一些验证，最后我在第一个div中用类.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从数据库中携带数据。数据库中可用的值是多少，这意味着如果数据库json_encode中的数据2也有2个数据，那些从json_encode获取数据的附加div类将追加2次带有类palnotific的div。现在我的问题是，如果我有两个div，其中palnotifi类来自追加，我的点击功能仅适用于第一个div，当我点击第二个div onclick时，函数不起作用。问题我有2个或更多，然后两个div，如果我点击任何一个div第一个div点击功能采取行动。如何才能将工作onclick功能只用于那些被点击的div？

Answer 1

让jquery对动态创建的元素做出反应的最简单方法是将事件附加到该元素本身。另一种方法是在带有子过滤器的容器div上使用on，但由于您已经在创建html，因此可以将其封装在$('yourhtml')中并将点击直接附加到该创建的元素。结合appendTo而不是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);
        })
});

Example fiddle

在此示例中，id也在手工存储之前存储，并在附加的点击内重复使用。如果您需要使用原始值，则可以使用$(this).find('.palid').val()（如this fiddle中所述）

Answer 2

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

var pid=x.val();

你可以在jQuery docs（http://api.jquery.com/val/）

中找到

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

Answer 3

您可以在Facets > Personal > First name功能中使用更具体的CSS3 Selector。我不完全确定这会解决你的整体问题，但它可能会引导你朝着正确的方向前进。

on()

这是example JSFiddle;

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

3 个答案: