动态创建的元素不响应“父级”点击事件

Question

首先，我知道我应该使用以下代码附加到易失性元素上

$("#volatiles_container").on("click", ".volatile", function() { ... });

我知道。

但是它不起作用，请看此演示，现有作品，创建的作品不起作用，为什么？

http://jsfiddle.net/LUsMb/607/

请参阅test1类及其事件函数。

（这不是我的页面，我在Google上找到了jsfiddle select2示例，并向其中添加了问题）

对于稍微复杂的示例，我们感到抱歉，只需查找test1 ，它就在html中的javascript中出现了两次。

在搜索中输入“ khglkgliy”

编辑：这是一个简单的示例-输入不在列表中的内容-http://jsfiddle.net/LUsMb/614/

Answer 1

检查文件select2.js第682行

this.dropdown.bind("click mouseup mousedown", function (e) { e.stopPropagation(); });

我认为点击事件在这里停止了。

Answer 2

我无法在您的jsFiddle中重现该问题（我看不到如何让jsFiddle实际创建任何新对象），但是您的.on()事件监听器有以下可能的原因：

$("#volatiles_container").on("click", ".volatile", function() { ... });

不适用于新创建的元素：

1. 它们不是#volatiles_container对象的子级。
2. 新创建的对象与选择器".volatile"不匹配。
3. 在新创建的对象之上，还有其他对象正在接收点击事件。
4. 另一个单击处理程序正在停止事件传播，以便事件不会冒泡到具有事件处理程序的元素上。

由于您的事件处理程序是当前应用于顶级文档的，因此我想这是第4个项目。 我建议您使用一个尽可能接近动态元素的事件处理程序。