jquery - 動的に作成された要素が「親」のクリックイベントに応答しない

Question

何よりもまず、次のコードを使用して揮発性要素にアタッチする必要があることを知っています

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

そんなこと知ってる。

しかし、それは機能しません。このデモを参照してください。既存のものは機能しますが、作成されたものは機能しません。なぜですか?

test1クラスとそのイベント関数を参照してください。

(これは私のページではありません。Google で jsfiddle select2 の例を見つけ、問題を追加しました)

少し複雑な例で申し訳ありません。を探してくださいtest1。html に 1 回、javascript に 2 回あります。

検索に「khglkgliy」と入力してください

編集：これはより簡単な例です - リストにないものを入力してください - http://jsfiddle.net/LUsMb/614/

score 3 · Accepted Answer

ファイルselect2.js行682を確認してください

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

ここでクリックイベントが停止すると考えています。

score 1 · Accepted Answer

あなたの jsFiddle で問題を再現することはできません (jsFiddle で実際に新しいオブジェクトを作成する方法がわかりません) が、.on()イベントリスナーで次のような理由が考えられます。

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

新しく作成された要素では機能しません:

あなたのイベントハンドラーは現在最上位のドキュメントに適用されているため、4 番目の項目だと思います。可能な限り動的要素に近いイベントハンドラーを使用することをお勧めします。

jquery - 動的に作成された要素が「親」のクリック イベントに応答しない