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

Question

私はプロジェクトに取り組んでいます。ここでは、同じクラスの多くの要素をページに追加し、これらのクラスをすべて$（セレクタ） 。クリック（）;イベントハンドラ。同じクラスの動的に追加された要素のどれもがクリックに反応していないことが起こっています。 jsFiddleへ

リンク：http://jsfiddle.net/8LATf/3/

• あなたに私が何を意味するかの優れた画像を与えるために、私は私のプロジェクトの実際の問題に非常によく似ているサンプルjsFiddleを作っクラス "added_element"の1つの要素は、すでにロードされているときにそのページにあります。この要素はクリック可能です。

• ボタンをクリックし、追加されたボタンを使用して動的にページに "added_element"クラスの他の要素を動的に追加します。これらの要素のいずれもクリック可能ではありません。

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

何か助力が大変ありがとうございます。

Answer 1

You need to delegate your handler。最も簡単な方法は、（これは.live()はjQueryの1.7のように、内部的に変換される方法です）.on('click', ...)を使用してdocumentにすべてを委任することです：

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

​http://jsfiddle.net/mblase75/8LATf/4/

しかし、あなたのケースでは、あなたがに委譲することができます#container、その中に追加された要素がすべて表示されるためです。可能な限り効率の理由から、最も近い可能性のあるDOM要素への委任が好ましい

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

​http://jsfiddle.net/mblase75/8LATf/5/

Answer 2

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

これを回避するには、イベントハンドラを代わりにdivを含むdivに追加し、 "added_element"を探しさせます。

jfiddle： http://jsfiddle.net/yKJny/

Answer 3

あなたがここにイベントの委任を使用する必要があり、イベントをバインドする正しい方法は次のようになります。ここでは

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

はcorrected fiddleです。