jqueryの助けを借りて動的なcontenでイベントをアタッチ

私は4行のテーブルを持っています。そして、その行をクリックすると、クリックした行の直後に新しいものが追加されていきます。ここでは、jqueryでどのように達成するかを示すためにコードを与えています。jqueryの助けを借りて動的なcontenでイベントをアタッチ

私がクリックした行の直後に新しい行を追加するjquery。

$(document).ready(function() { 
     $("table#Table1 tr").click(function() { 
      var $tr = $(this).closest('tr'); 
      var myRow = ($tr.index() + (++counter)); 
      $(this).after("<tr ><td>" + myRow + ")&nbsp;</td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>"); 

     });

}）;

問題は、jqueryで新しい行を追加していますが、クリックイベントが新しいイベントに添付されていないことです。新しい行でクリックイベントをアタッチするための最善の方法を教えてください。 jQueryのは、動的に作成されたものを含め、すべてのテーブル行にクリックイベントをバインドを確認する必要があります

$("table#Table1 tr").click(function() {

$('table#Table1 tr').live('click', function() {

に -

出典

2011-09-14 Keith Costa

あなたは、イベントをバインドする.live(..)を使用したいです。これにより、動的に生成されたDOM要素が同じイベントを使用できるようになります。

$("table#Table1 tr").live('click', function() { 
      var $tr = $(this).closest('tr'); 
      var myRow = ($tr.index() + (++counter)); 
      $(this).after("<tr ><td>" + myRow + ")&nbsp;</td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>"); 

     });

出典

2011-09-14 17:20:09