添加jQuery点击事件dynamic添加内容

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

但是我也可以select向表中添加行并手动填充它们。 但是由于我添加的行不在文档中，所以他们不会得到附加的click事件处理程序，所以我不能点击它们来获取input框。

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

如何使用.on()示例：

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

Answer 2

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

Answer 3

使用实时事件处理程序。 它不处理所有的事件，但它处理了点击事件。 处理程序将被绑定到与select器匹配的所有当前和将来的元素。

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

Answer 4

插入元素后，您将不得不添加事件侦听器。

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