代码之家 › 专栏 › 技术社区 › Gonzalo Muñoz

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

event-bubbling html jquery

0

Gonzalo Muñoz · 技术社区 · 12 年前

我在使用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]')) {
     ...
  }
}

1 回复 | 直到 12 年前

1

nnnnnn 12 年前

试试这个:

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

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

这使用的是 .on() method 。当点击主体时,jQuery将检查它是否位于与第二个参数中的选择器匹配的元素上。(如果您使用的是旧版本的jQuery,则需要使用 .delegate() 而不是 .on() 。如果你正在使用一个可笑的旧版本,请尝试 .live() .)

您现有的代码不起作用,因为 event.target 为您提供了启动事件的DOM元素,即您单击的最低级别的子级(正如您所发现的,它可能是您试图测试的div的子级之一)。