jquery - jQuery on() が機能しない

Question

サイトでボタンを動的に生成しています。これらの要素の状態を検出するには、clickjQuery のon(). 以下を試してみましたが、うまくいかないようです。私は何か間違ったことをしていますか？

$('.press').on('click', function() {
    alert('clicked'); //Does not trigger on dynamic elements
});

私のJSFiddleを表示すると、動的に生成されたボタンをクリックしても結果が生成されないことに注意してください。

score 8 · Accepted Answer

イベント処理を委任する場合、セレクターは動的要素を含む要素 ( までdocument) に移動し、の 2 番目の引数.onはセレクターです:ドキュメントを参照してください。

$(document).on('click', '.press', function () { ...

委任を使用する場合は、最小限のトラバーサルが必要になるように、できるだけ具体的なセレクターを使用することをお勧めします。ただし、通常は大きな違いはありません。

score 3 · Accepted Answer

動的に生成される要素の場合、イベント委任を使用する必要があります。委任を行うには、親要素に .on() を適用する必要があります

score 2 · Accepted Answer

イベントを委任する

$('body').on('click','.press', function() {
    alert('clicked'); // now it triggers on dynamic elements
});

static parent containerボディを..に交換できます。

not available in the DOMイベントをアタッチすると要素が静止しているため、アプローチは機能しません。

score 2 · Accepted Answer

そのはず

$(document).on('click', ".press", function() {
    alert('clicked'); 
});

$('.press')は、現在ドキュメント内にあるすべての要素を検索し、それらにイベントをバインドします。そのため、選択する時点では存在しなかったため、後で追加する要素では機能しません。

$(document)document常にどこにでも存在するを選択し、イベントをバインドします。次にをフィルタリング.pressして、一致.pressする要素のみが実際にコールバックを呼び出すようにします。

.pressを使用するのではなく、要素の共通の親であり、その時点で存在する親要素を選択する必要があることに注意してくださいdocument。

4 に答える 4