添加jQuery单击事件以动态添加内容

Question

我有一个由php和mySQL填充的多行和多列的表.对于某些td,我在document.ready函数中添加了jQuery click事件,让用户更改内容.

但我也可以选择向表中添加行并手动填充它们.但是由于我添加的行不在文档就绪,因此它们不会附加单击事件处理程序,因此我无法单击它们来获取输入框.

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

Answer 1

您想要使用1.3中引入的直播活动.

$("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
});

Answer 2

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