0

我正在尝试使用 jQuery 添加和删除表行，添加的行包含一个删除链接，由于某种原因，它不适用于生成的元素，即使我使用 on。

这是我的代码：

$("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$(".remove").on('click', function(event) {
  $(this).parent().parent().remove();
});

http://jsbin.com/ucopun/1/

可能是什么问题呢？

删除链接应该删除它所在的整行。

4

4 回答 4

2

当您使用 时on()，您仍然需要将事件绑定到页面上已经存在的容器元素。我认为这就是你想要的：

$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});
于 2012-12-12T16:32:31.050 回答
2

你快到了。请参阅此jsFiddle 示例。

$("#myTable").on('click', '.remove', function(event) {
    $(this).closest('tr').remove();
});​

由于您要添加代码运行时不存在的元素，因此您需要使用.on()绑定到代码运行时确实存在的元素。

正如文档所述：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。

另外，我发现.closest('tr')比.parent().parent()

于 2012-12-12T16:33:22.060 回答
1

我会将事件绑定到表格并将其委托给按钮

参考：http ://api.jquery.com/delegate/

$("#myTable").delegate('.remove','click' , function(event) {
  $(this).closest('tr').remove();
});

编辑：似乎委托被 on 取代（截至 jQuery 1.7 - 参考http://api.jquery.com/on/）。

于 2012-12-12T16:35:54.000 回答
1

使用直播功能

$('.remove',$("#myTable")).live('click',function(){
  $(this).parents('tr:first').remove();
});

​<a href="http://jsfiddle.net/B8wSq/2/" rel="nofollow">http://jsfiddle.net/B8wSq/2/

于 2012-12-12T16:57:26.383 回答