如何使用jQuery訪問動態創建的頁面元素

Question

我有一個使用jQuery將行追加到表末尾的Web應用程序。 每行都有一個做筆記的文本區域，以及一個彈出窗口的編輯按鈕，因此可以輸入更多信息。 這樣做的代碼如下所示： http : //jsfiddle.net/H3m4z/

這是實際代碼的精簡版本，因為它的實際代碼涉及AJAX調用，以在添加表時將每個表行的數據保存到數據庫中。 rowID在適當的腳本中是唯一的，因此我可以通過'notes [rowID]'引用每一行的文本區域。

當用戶在編輯彈出窗口中輸入更多信息時，我就是這樣做的。 輸入的所有新注釋都會保存到數據庫中，但要使Web應用程序看起來更“生動”，並作出響應，新注釋將從編輯窗口復制到父表中的相應注釋字段，如下所示：

window.opener.$('#notes[' + rowID + ']').text(newnotes);

對於加載父頁面時已經存在的行，這絕對好用，例如我示例中的第一行。 但是，它不適用於由jQuery動態添加的表行。 我猜答案是live（）; 以某種方式，但我不確定在哪里或如何。

Answer 1

要通過on() （代替live() ）使用事件委托：

$('#table').on('click', 'td button', function(e){

});

或者，您可以將html包裝在jQuery函數中，然后立即綁定事件（簡化示例）：

var $tr = $('<tr><td>foo</td></tr>').on('click', function(e){

});

$tr.appendTo('#table');

顯然，這會將事件綁定到實際的<tr> ，但是您明白了。