按类和<div> </div>选择时，jQuery单击事件问题

Question

当我使用jQuery按类访问<div>或<p>个元素时，它会针对click函数重复事件，它会通过数组或堆栈中的元素数重复该事件。所以，如果我有3个<div>个元素在彼此的顶部或彼此相邻，那么底部或右边的元素将经历一次事件，顶部的那个或者左会经历3次。

我做错了吗？或者这不是用jQuery完成的吗？

[修改] 对不起，如果我以一种令人困惑的方式措辞。这是一个链接...你会更好地理解我的问题。只需通过表单添加几个新元素，然后单击它们。

http://jsfiddle.net/rNj6e/

Answer 1

尝试：

$(".some_class").click(function(event){
    alert(event.target.id);
}).children().click(function(event) {
  return false;
});

这可以防止点击事件冒泡到子节点，当您单击div中包含的子节点时会发生这种情况。

您正在收到一个空白ID，因为您点击的目标很可能是您点击的孩子并且您没有为其提供ID。

要证明这一点......

$(".some_class").click(function(event){
    alert(event.target.nodeName);
});

会提醒您刚刚单击的nodeName（html标记的名称）。

Answer 2

将其更改为：

$(".some_class").each( function () { 

jQuery(this).click(function(event){
    alert(event.target.id);
});

});

Answer 3

现在你已经发布了一个显示问题的小提琴，我实际上可以回答。问题是您将click事件处理程序绑定到绑定到.dp的click事件处理程序内的#add。那么会发生什么：

1. 您填写表单并点击#add，这会创建一个包含课程dp的新元素并附加
2. 然后它将click事件处理程序绑定到具有类dp的每个元素（只有1，我们刚添加的1）
3. 您再次填写表单，点击#add，重复步骤1和2，，以便将另一个点击事件监听器绑定到第一个.dp元素，然后绑定一个到新元素。
4. 根据需要重复操作，每次点击#add时，都会将越来越多的事件处理程序绑定到现有元素！

要解决此问题，您需要将事件处理程序绑定到.dp事件处理程序之外的#add。问题是您正在动态创建新的.dp元素，因此仅使用.click将不会绑定到尚未在DOM中的元素。要解决这个问题，您可以使用delegate，它将事件处理程序绑定到与选择器现在和将来匹配的元素：

$("#preview").delegate(".dp", "click", function(event){
    alert(this.id);
});

这是一个updated fiddle。