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

Question

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

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

我知道。

但它不起作用，看到这个演示，现有作品，创建没有，为什么？

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

请参阅test1课程及其'事件功能。

（这不是我的页面，我在google上找到了一个jsfiddle select2示例，并将我的问题添加到了它中）

对于略微过于复杂的示例感到抱歉，只需查看test1，它在html中的html一次和两次。

在搜索中输入'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项。我建议使用尽可能接近动态元素的事件处理程序。