jquery - jQueryがページに動的に追加されたクラスを認識しない

Question

同じクラスの多くの要素をページに追加し、これらのクラスすべてに$（'selector'）。click（）;がアクセスできるようにするプロジェクトに取り組んでいます。イベントハンドラ。ただし、同じクラスの動的に追加された要素のいずれもクリックに応答していません。

私が何を意味するのかをよりよく理解するために、サンプルjsFiddleを作成しました。これは、私のプロジェクトの実際の問題と非常によく似ています。

jsFiddleへのリンク：http：//jsfiddle.net/8LATf/3/

クラス「added_element」の1つの要素は、ロード時にすでにページ上にあります。この要素はクリック可能です。
ボタンをクリックすると、appendを使用してクラス「added_element」の他の要素が動的にページに追加されます。これらの要素はどれもクリックできません。

クラス「added_element」のすべての要素をクリック可能にするにはどうすればよいですか？イベントハンドラーで使っているセレクターと関係があると思いますが、わかりませんでした。

どんな助けでも大歓迎です!!!

score 11 · Accepted Answer

ハンドラーを委任する必要があります。document最も簡単な方法は、すべてをusingに委任すること.on('click', ...)です（これは.live()、jQuery 1.7の時点で内部的に変換される方法です）。

$(document).on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

ただし、あなたの場合、#container追加されたすべての要素がその中に表示されるため、に委任することができます。可能な場合は、効率上の理由から、可能な限り最も近いDOM要素に委任することをお勧めします。

$('#container').on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

score 0 · Accepted Answer

ここでイベント委任を使用する必要があります。イベントをバインドする正しい方法は次のとおりです。

$('#container').on('click', '.added_element', function() {
    var id = $(this).attr('id');
    alert(id);
});

score -1 · Accepted Answer

イベントハンドラーを「added_element」にアタッチすると、スクリプトを介して動的に作成されたものはDOMにありません。したがって、新しく作成された要素に関連付けられたイベントハンドラーはありません。

これを回避するには、代わりにイベントハンドラーをそれを含むdivにアタッチし、「added_element」を検索します。

3 に答える 3