jQuery单击事件未传递到附加的span

我用

id=“tube\u clx”

单击div

此操作将带

id=“tube”

的范围附加到div，带

id=“trash”

当我用id=“垃圾”单击span时。我希望警报弹出，但它没有

我做错了什么

<div> <div id="tube_clx">[click div]</div> <div id="tube"></div> </div> <script type="text/javascript"> $(document).ready(function () { $('#tube_clx').on('click', function(){ $('#tube').append('<span id="trash">[click span]</span>'); }); $('#trash').on('click', function(){ alert('hi'); }); }); </script> [点击div] $（文档）.ready（函数（）{ $（'#tube_clx'）。在（'click'，function（）{ $（“#管”）。追加（“[单击span]”）； }); $（'#trash'）。在（'click'，function（）{ 警报（“hi”）； }); });

---

事件处理程序绑定到ID为

#trash

的任何元素，但由于您尚未单击

#tube\u clx

，因此DOM中没有此类元素。
要将事件附加到ID为

#trash

的任何未来元素，必须使用委托事件处理程序，如下所示：

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

还要注意，它不是

$（'.tube_clx'）

，而是

$（''tube_clx'）

，因为它是元素ID

$（“#trash”）

在追加span之前被调用，并返回结果集，因为调用选择器时

#trash

不存在，因此事件处理程序不会绑定到任何元素

使用事件委派并将事件处理程序附加到

#tube

元素：

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

也许你的重复是对的@Felix Kling（dupe），但是我的演示代码和（特别是）adeneo小提琴和解释使得这个“泡沫问题”得到了更好的解释；话虽如此，若我遇到了你们提到的答案（并不是我并没有寻找答案），那个么这个问题就不会出现在这里了