動態創建的元素不響應“父級”點擊事件

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個項目。 我建議您使用一個盡可能接近動態元素的事件處理程序。