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

Question

我有一个由php和MySQL填充的多行多列表格。 对于其中一些td，我在document.ready函数中添加了jQuery点击事件，以便让用户更改内容。

但我还可以选择向表格添加行并手动填充它们。 但是由于我添加的行不在文档准备好时存在，它们将无法获取单击事件处理程序的附加，因此我无法单击它们以获得输入框。

<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>')
}

- peirix

---

很棒的问题。几乎完美地解决了我的问题！ - user172632

看看这个答案：https://dev59.com/cHM_5IYBdhLWcg3wfTI0 - Edmhs

Answer 1

您想使用在1.3版中引入的live事件。

$("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()可能是更好的选择。请参阅下面的评论。

如何使用.on()的示例：

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

- Plutor

---

我认为这可能是'09年最好的答案，但对于任何在最近时间内遇到此问题的人，请避免使用live。请改用delegate()，如Tauseef所回答的那样。有关详细信息，请参见http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/。 - Mala

太好了，正是我所需要的。它甚至为新添加的DOM元素添加事件处理程序。我不确定它在性能方面的表现如何，但它确实有效 :) - Roboblob

请注意，live()现已弃用，但可以轻松替换为on()。 - Tim Post

Answer 2

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

- Tauseef

---

虽然你三年后可能不太可能得到采纳，但还是感谢你的回答！ - Mala

Answer 3

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

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

- tvanfosson

Answer 4

在元素被插入后，您需要添加事件监听器。

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

- Rigobert Song