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

【问题标题】：how to select a div from multiple div on jquery click event if all div have same class?如果所有 div 具有相同的类，如何在 jquery click 事件中从多个 div 中选择一个 div？
【发布时间】：2015-11-03 15:15:35
【问题描述】：

我有一个 div 和一个 .display_noti 类，在里面我有一个 append 另一个 div 和类 .palnotific by jquery。我已经从数据库中获取数据并将获取的数据转换为 @987654326 @.我使用了那个 json 格式的数据，并在那个 div 上用.palnotific 类制作了一些append 的信息。

我的第一个 jquery 代码在该 div 中附加数据，类 .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 格式数据并进行了一些验证，然后最后我在第一个 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从数据库中携带数据。它的值将与在数据库中可用，这意味着如果数据库中有 2 个数据 json_encode 也将有 2 个数据，并且那些从 json_encode 获取数据的附加 div 类将附加 2 次带有类 palnotific 的 div。现在我的问题是，如果我有两个 div与 palnotifi 类的起源附加我的点击功能仅适用于第一个 div，当我点击第二个 div onclick 功能不起作用。无论我有 2 个或更多然后两个 div 如果我先点击任何一个 div div 点击功能采取行动。我怎样才能使onclick 功能只对那些被点击的 div 起作用？

【问题讨论】：

如果您可以将代码粘贴到示例 jsfiddle 中，这可能会帮助某些人为您找到解决方案。
@BryanRay 你可以通过 jquery onclick 函数从一组具有相同类的 div 中选择一个 div 吗？我只想选择并采取行动那些被点击的 div 所以知道我们怎么能用 jquery 做吗？
如果您只显示输出 HTML 的样子，这将更容易理解。

标签： javascript jquery

【解决方案1】：

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

Example fiddle

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

【讨论】：

它完成了我的工作，兄弟，谢谢！那么，我们使用appendTo 来为每个带有.palnotific 类的div 附加一个点击功能，对吧兄弟？
是的，因为 appendto 仍然返回原始 jquery 对象。您还可以有一个包含创建的 div 的变量，并使用它来附加（到）并将点击附加到，但是这样它们可以被链接起来。
返回原始 jquery 对象意味着兄弟？
这意味着 objectA.appendTo(objectB) 返回 objectA。在这种情况下 $(somehtml)

【解决方案2】：

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

var pid=x.val();

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

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

【讨论】：

【解决方案3】：

您可以在on() 函数中使用更具体的CSS3 Selector。我不完全确定这会解决您的整体问题，但它可能会引导您朝着正确的方向前进。

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

这是example JSFiddle；

【讨论】：