javascript - jQuery 子激活父单击事件

Question

我在阻止子元素激活 jQuery 中的父单击事件时遇到问题。我用 Google 搜索了一下，偶然发现了几个不同的解决方案，但似乎都不适合我。

我需要使表格单元格在单击后可编辑，以便我可以通过 ajax 异步提交编辑后的文本。我正在使用 jQuery 将文本替换为输入字段，但随后无法对其进行编辑或提交，因为每次点击都会再次触发父事件。

我试过使用:

$("child").click(function(e){  
  e.stopPropagation();
})

还有 .unbind("click") 在父级上，因为一旦它被点击就不需要再次点击，但这似乎也解除了子级的绑定(bind)。

我准备了一个 fiddle为了正确显示问题。

任何帮助都会很棒!这让我发疯。

Answer 1

问题是因为 .btn-comment 元素是动态附加的，所以您需要一个委托(delegate)处理程序。试试这个:

$(".td-edit").on('click', '.btn-comment', function(e) {
    e.stopPropagation();
});

Updated fiddle

请注意 fiddle - 您可以看到事件未被传播，因为在单击 button 元素时 alert() 不会触发。