javascript - 如何使用 jQuery 访问动态创建的页面元素

Question

我有一个网络应用程序，它使用 jQuery 将行追加到表的末尾。每行都有一个用于做笔记的文本区域，以及一个弹出窗口的编辑按钮，以便可以输入更多信息。执行此操作的代码如下所示:http://jsfiddle.net/H3m4z/

这是实际代码的精简版本，因为实际代码涉及 AJAX 调用，以便在添加数据时将每个表行中的数据保存到数据库中。 rowID 在正确的脚本中是唯一的，因此我可以通过“notes[rowID]”引用每行的文本区域。

当用户在编辑弹出窗口中输入更多信息时，我就是这样做的。输入的任何新注释都会保存到数据库中，但为了使网络应用程序感觉更加“活跃”并且响应迅速，新注释会从编辑窗口复制到父表中相应的注释字段，如下所示:

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

对于加载父页面时已经存在的行(例如我的示例中的第一个表行)，这绝对可以正常工作。但是，它不适用于由 jQuery 动态添加的表行。我猜答案涉及 live();不知怎的，但我不太确定在哪里或如何。

Answer 1

通过 on() 使用事件委托(delegate)(取代 live() ):

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

});

或者您可以将 html 包装在 jQuery 函数中并立即绑定(bind)事件(简化示例):

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

});

$tr.appendTo('#table');

这显然会将事件绑定(bind)到实际的 <tr> ，但你明白了。