Question

我尝试过删除动态添加的行的各种选项，例如.on和.live，但仍然无法删除新添加的行。

我遇到了这个JSFiddle

部分JS代码：

$(".deleterow").on("click", function(){
    var $killrow = $(this).parent('tr');
    $killrow.addClass("danger");
    $killrow.fadeOut(2000, function(){
        $(this).remove();
    });
});

但它也有同样的问题。

有人可以指出我在这个JSFiddle中缺少什么吗？

感谢。

Answer 1

这对你有用。

$(document).on("click", ".deleterow", function () {
    var $killrow = $(this).parent('tr');
    $killrow.addClass("danger");
    $killrow.fadeOut(2000, function () {
        $(this).remove();
    });
});

http://jsfiddle.net/7594S/34/

<强> 修改

委托事件方法仅将事件处理程序附加到一个元素，事件只需要冒出一个级别

在您的情况下，deleterow是动态添加的内容和事件不会附加到该内容。但如果您附加到父容器元素或document元素，它也将触发新元素

Answer 2

使用Event Delegation将click事件处理程序注册到动态创建的行。试试这个：

$(".container").on('click','.deleterow', function(){
var $killrow = $(this).parent('tr');
    $killrow.addClass("danger");
$killrow.fadeOut(2000, function(){
    $(this).remove();
});
});

<强> DEMO

动态添加的行不会删除

2 个答案: