将 jQuery 点击事件添加到动态添加的内容答案

【问题标题】：adding jQuery click events to dynamically added content将 jQuery 点击事件添加到动态添加的内容
【发布时间】：2009-05-12 12:16:11
【问题描述】：

我有一个由 php 和 mySQL 填充的包含多行和多列的表。对于一些 td，我在 document.ready 函数中添加 jQuery click-events 以让用户更改内容。

但我也可以选择向表中添加行并手动填充它们。但由于我要添加的行在文档中没有准备好，它们不会附加点击事件处理程序，因此我无法单击它们来获取输入框。

<table>
  <tr>
    <td class="clickable">Some info</td>
    <td class="clickable">Some more info</td>
    <td>Unchangable info</td>
  </tr>
  ... more similar rows ...
</table>

然后是 jQuery

$("tr.clickable").click(function() {
   //add input fields
}

$("span#addNewRow").click(function() {
   $("table").append('<tr><td class="clickable"></td> ... </tr>')
}

【问题讨论】：

好问题。几乎完全符合我的问题！
看这个答案stackoverflow.com/questions/1359018/…

标签： jquery

【解决方案1】：

您想使用 1.3 中引入的live events。

$("tr.clickable").live("click", function() {
   //add input fields
});

$("span#addNewRow").live("click", function() {
   $("table").append('<tr><td class="clickable"></td> ... </tr>')
});

更新：请注意，从 jQuery 1.7 开始，live() 已弃用。请改用on()。在某些情况下，delegate() 可能是更好的选择。请参阅下面的 cmets。

.on()的使用示例：

$("table").on("click", "tr.clickable", function() {
   //add input fields
});

【讨论】：

我希望这是 09 年的最佳答案，但对于最近遇到此问题的任何人，请避免使用 live。请改用 delegate()，如下面的 Tauseef 所回答。详情见alfajango.com/blog/…
非常好，正是我需要的。它甚至为新添加的 DOM 元素添加了事件处理程序。我不确定它在性能方面的表现如何，但它可以工作:)
请注意，live() 现在已弃用，但 trivial to replace 与 on()。

【解决方案2】：

您可以使用 .delegate() 函数，根据一组特定的根元素，将处理程序附加到一个或多个与选择器匹配的元素的一个或多个事件，现在或将来。

【讨论】：

虽然 3 年后您不太可能被录取，但感谢您的回答！

【解决方案3】：

使用live 事件处理程序。它不处理所有事件，但它确实处理单击事件。处理程序将绑定到与选择器匹配的所有当前和未来元素。

$('tr.clickable').live( 'click', function() {
   ...
});

【讨论】：

【解决方案4】：

您必须在插入元素后添加事件侦听器。

如果您使用 JQuery，您可以使用 jQuery 库 livequery，它允许您将事件添加到尚未在 dom 中的元素，这样您在向 dom 中插入新内容时就不必重新绑定事件。

【讨论】：