在jquery的幫助下動態內容附加事件

Question

我有4行的表，當我點擊任何行然後一個新的增加行後，我點擊了。這裏我給我的代碼只是爲了展示如何用jQuery實現它。

我的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添加新行，但點擊事件沒有得到新的附加。所以請指導我使用新行添加點擊事件的最佳方法。

Answer 1

你想用.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>"); 

     }); 

Answer 2

嘗試改變 -

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

到

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

這應該確保的jQuery結合的Click事件給所有錶行，包括那些動態創建。

工作演示 - http://jsfiddle.net/w5Atk/

Answer 3

嘗試$ .fn.delegate

http://api.jquery.com/delegate/