jQuery 使用事件冒泡和嵌入的 div答案

【问题标题】：jQuery using event bubbling and embedded divsjQuery 使用事件冒泡和嵌入的 div
【发布时间】：2013-09-28 02:22:00
【问题描述】：

我在使用 jQuery 时遇到问题。

我正在使用 javascript 动态创建 div，这就是使用事件冒泡将这个 div 与我的 jQuery 函数绑定的原因。我正在使用标签正文开始查找具有我正在动态创建的 productId 属性的 div。问题是，当单击具有 productId 属性的 div 内的其中一个 div 时，不会运行。仅在不包含其他嵌入 div 的 div 部分中。 ¿ 有人可以帮助我吗？ ;)

这是代码：

<div class="cartProduct" productId="2">
   <div class="names">Patatoes</div>
   <div class="units">5</div>
</div>

$('body').click(function(event) {
  if($(event.target).is('[productId]')) {
     ...
  }
}

【问题讨论】：

你知道动态创建的div的类名吗？它们是否会发生变化以及您使用的是哪个版本的 jquery？
无论如何都使用事件委托并将事件绑定到您需要的 div，这样您就可以避免这些检查。即$(document).on('click', 'div[productId]', function(){...})

标签： jquery html event-bubbling

【解决方案1】：

试试这个：

$('body').on('click','[productId]',function(event) {
   // do something
});

演示：http://jsfiddle.net/L5jg8/

这使用.on() method 的委托形式。当点击 body 时，jQuery 将检查它是否在与第二个参数中的选择器匹配的元素上。（如果您使用的是旧版本的 jQuery，则需要使用 .delegate() 而不是 .on()。如果您使用的是可笑的旧版本，请尝试使用 .live()。）

您现有的代码不起作用，因为event.target 为您提供了启动事件的 DOM 元素，即您单击的最低级别的子元素（您发现它可能是您尝试测试的 div）。

【讨论】：

完美，解决了我的问题。完善解决方案和解释。非常感谢！！！