新たに追加されたDOMでライブクリックイベントを作成する方法

Question

私はlive（）ユーザーです。何とかlive（）が非推奨です。 bind（）を使って新しい追加されたDOMのイベントを有効にしようとしましたが、そうではありません。

bind（）を正しく行う方法を教えてください。またはこのタスクを実行する他の方法がありますか？

これはhtmlです：

<table> 
    <tr> 
     <td> hi there <span class="click">click me</span></td> 
    <tr> 
    <tr> 
     <td> hi there2 <span class="click">click me</span></td> 
    <tr> 
    <tr class="end"> 
     <td></td> 
    </tr> 
</table> 
<button class="add_new">add new row</button> 

これはJSです：

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>'; 

$('.add_new').click(function() { 
    $('.end').before(new_row);  
}); 


$('.click').bind('click', function() { 
    alert('clicked'); 
}); 

可能ならば、私は、ネイティブjQueryのメソッドではなく、プラグインを使用します。これはhttp://jsfiddle.net/bondythegreat/z3uXH/

Answer 1

あなたはjQueryの.on()や.delegate()の動的なバージョンを使用する必要があります。委任イベント処理を使用して動的挙動については

$('table').on('click', '.click', function() { 
    // your code here 
}); 

、基本的な考え方は、イベントハンドラがインストールされた後に動的に作成されていない静的な親オブジェクトでなければなりません（jQueryオブジェクトで）最初の選択ということです。 .on（）の2番目の引数として渡される2番目のセレクタは、イベントハンドラで使用する特定の項目に一致するセレクタです。これらの項目は、イベントハンドラのインストール後に動的に作成できます。

.click()または.bind()を使用すると、コードを最初に実行したときに存在していたオブジェクトでのみ動作する静的イベントハンドラが得られます。

このコードをより堅牢にするには、2つのことをお勧めします。まず、イベントと混同しやすい「クリック」のようなクラス名を使用しないでください。第二に、あなたのテーブルにidを入れて、間違ってページ内の他のテーブルでアクティブになっている非常に一般的な"table"ではなく、最初のセレクタでIDを参照できるようにします。

Answer 2

私jsfiddleであるあなたがsoのようにjQueryのon() method

を使用する必要があります。

$('table').on('click', '.click', function() { 
    alert('clicked'); 
}); 

Answer 3

jQuery 1.7+ live()からは、on()に置き換えられます。 live()のドキュメントページには、新しい方法に更新する方法が記載されています。翻訳しますあなたの場合は

：

$('table').on('click','.click', function() { 
    alert('clicked'); 
}); 

はaltered & working fiddle