jQuery单击事件未传递给附加跨度答案

【问题标题】：jQuery click event not passed to appended spanjQuery单击事件未传递给附加跨度
【发布时间】：2013-06-19 17:35:22
【问题描述】：

我用id="tube_clx"点击div。

此操作将使用id="tube" 附加到 div 与id="trash" 的跨度。

当我点击 id="trash" 的 span 时。我希望警报会弹出，但它没有。

我做错了什么？

[点击div]

【问题讨论】：

Events triggered by dynamically generated element are not captured by event handler 的可能重复项
你是对的@Felix Kling (dupe)，但是我的演示代码和（尤其是）adeno fiddle 和解释使这个“冒泡问题”得到了更好的解释；话虽如此，如果我遇到你提到的答案（不是我没有寻找它），这个问题就不会在这里

标签： jquery

【解决方案1】：

$('#trash') 在您附加 span 之前被调用，它返回一个结果集，因为在您调用选择器时#trash 不存在，因此您的事件处理程序未绑定到任何元素。

使用事件委托并将事件处理程序附加到您的 #tube 元素：

$('#tube').on('click', '#trash', function(){

【讨论】：

【解决方案2】：

事件处理程序绑定到 ID 为 #trash 的任何元素，但由于您尚未单击 #tube_clx，因此 DOM 中没有此类元素。
要将事件附加到 ID #trash 的任何未来元素，您必须使用委托事件处理程序，如下所示：

$('#tube').on('click', '#trash', function(){ 
    alert('hi');
});

还要注意不是$('.tube_clx')，而是$('#tube_clx')，因为它是元素ID。

【讨论】：