javascript - 使用jquery添加和删除表中的行

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 7 年前。

我有一个按钮，#add ，单击后会在表中添加一行。新插入行的最后一个单元格有一个删除图标，如果单击该图标，我想删除该行。

我相信我已经完成了 95%，但是当单击删除图标时没有任何反应？这是因为 DOM 需要刷新吗？

$(document).ready(function(){
    $('#add').click(function() {
        $('tbody').append("<tr><td>test</td><td></td><td data-editable='true'>1</td><td><center><i id='delete' class='fa fa-trash-o'></i></center></td></tr>");
        $('#table').editableTableWidget();
    });
    $('#delete').click(function(){
        $(this).closest('tr').remove();
        console.log('click');
    })
});

Answer 1

您的代码中有一些错误。

1. 您正在重复 ID。你不应该那样做。您需要使用类来代替它。
2. 由于您是动态创建行，因此正常的点击事件将不起作用。为此，您需要使用事件委托(delegate)。

那么你的最终代码将如下所示，

$('#add').click(function () {
    $('tbody').append("<tr><td>test</td><td></td><td data-editable='true'>1</td><td><center><i  class='fa fa-trash-o delete'></i></center></td></tr>");
    $('#table').editableTableWidget();
});
$('#table').on('click', '.delete', function () {
    $(this).closest('tr').remove();
    console.log('click');
})