jquery - jQuery 事件在新元素上触发了两次

Question

我使用 html() 在类“info”的 div 中创建了一个新元素：

$(".info").html(
    $elementsString      // which places a bunch of form elements in there
);

我在点击时触发一个事件：

$('.info').on('click', 'input', function(event){
    alert('ey');
    event.preventDefault();
});

但是该事件被触发了两次。有谁知道为什么？

JSFiddle

对，这里是 JSFiddle。

Answer 1

我认为你应该打电话event.stopPropagation()而不是event.preventDefault();

$('.info').on('click', 'input', function(event) {
    alert('ey');
    event.stopPropagation();
});

Answer 2

如果 event.stopPropagation() 不起作用，您可以比较 target 和 currentTarget 以确保您实际单击了正确的元素。差不多是这样的：

$('.info').on('click', 'input', function(event){
   if (event.target == event.currentTarget) {
      event.preventDefault();
      // Do stuff here...
   }
});

希望这有帮助

Answer 3

虽然stopPropagation()有效并且我接受了它作为答案，但问题的根源实际上是导致错误的标记。这有点像丛林，因为不同的脚本和 PHP 编写了所有内容，但是在为 JSFiddle 清理所有内容之后（现在插入问题的底部），很明显我有嵌套.info元素。

底线：有嵌套.info元素，所以事件被触发计算这两个。我通过更改其中一个元素的类名解决了这个问题。