Jqueryは動的にリンクを作成します

Question

テーブルに行を作成するJQueryの部分があり、セルの1つにクラスに囲まれたXがあります。動的に作成され、クリックリスナーでクリックされたときに発生しません。 ここにコードがあります。

$('#add').click(function() { 
    $('#table').append('<td class="x">X</td></tr>'); 
}); 
$('.x').click(function() { 
    alert('Fired'); 
}); 

Answer 1

あなたのイベントハンドラを登録するとき<td>要素がまだ存在していないので、後でトリガされるハンドラのlive()またはdelegate()を使用する必要があります。ライブ

$(".x").live("click", function() { 
    alert("Fired"); 
}); 

Answer 2

$(".x").live("click", function() 
{ 
    alert("Fired"); 
}); 

イベントを追加DOMの後半に追加されたものだけでなく、現在のところに追加されています。

Answer 3

代わりのこの

$('.x').live('click', function() { 
    alert('Fired'); 
}); 

へ

$('.x').click(function() { 
    alert('Fired'); 
}); 

変更それはあなただコンテンツに.live機能を使用する必要があるクラスのx

Answer 4

で任意の作成した要素にクリック機能を結合し動的に生成される。

ので、あなたが最初に新しい.x要素を追加し、後で、（ゼロがおそらく存在している）すべての.xの要素にリスナーを作成している

$('.x').live('click',function() { 

Answer 5

で

$('.x').click(function() { 

を交換してください。

2つの解決策があります。一方が他方にはあなたのコードを書き換えることで、jQueryのliveを使用することです：代わりにclickの

var xClickHandler = function() { 
    alert('Fired'); 
}; 
$('#add').click(function() { 
    $('#table').append(
     $('<td class="x">X</td></tr>').click(xClickHandler); 
    ); 
}); 

Answer 6

使用live：

$('.x').live("click", function() { 
    alert('Fired'); 
}); 

Answer 7

あなたが追加されているHTMLがテーブルにはタイプミスがあります。あなたは手の込んだtrタグを見逃しています：

$('#add').click(function() { 
    $('#table').append('<tr><td class="x">X</td></tr>'); 
}); 
$('.x').click(function() { 
    alert('Fired'); 
}); 

Answer 8

ライブメソッドを使う必要があると思います。 http://api.jquery.com/live/

$('.x').live('click', function() { 
    // Live handler called. 
});