jQuery单击流上的事件以从表中添加/删除行答案

【问题标题】：jQuery clicks events on flow to add/remove rows from tablejQuery单击流上的事件以从表中添加/删除行
【发布时间】：2013-08-13 15:54:45
【问题描述】：

我使用 jQuery 在单击新行时动态添加到我的表中，另一方面，我有一个可以在单击按钮时删除行的函数。如果我在添加后尝试删除，则无法删除动态添加的行的问题。

//adding new row to table
    $('button#addRow.btn').click(function(e) {
            e.preventDefault();
            var rowCount = $('#feeds tr').length;
            $('#feeds > tbody:last').append(//here comes tr html)};

//removing rows from table

    $("tr td .delete").on("click", function(e) {
        e.preventDefault();
        $(this).closest("tr").remove()
    });

【问题讨论】：

你需要使用事件委托，见documentation for on()
您是否在新添加的 td 中添加删除类？
删除类有没有

标签： jquery events html-table row

【解决方案1】：

由于表格行是动态添加的，所以需要使用event delegation注册事件处理函数

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#feeds').on('click', '.delete', function(event) {
    event.preventDefault();
    $(this).closest("tr").remove();
});

这会将您的事件附加到#feeds 元素中的任何.delete 按钮，减少检查整个 document 元素树的范围并提高效率。

参考资料：

【讨论】：

我不知道为什么这被否决了，因为它是正确的答案，+1

【解决方案2】：

尝试在你的 tr html 中使用类似的东西：

<tr>
    // whatever ...

    <td>
        <input type="button" onclick="$(this).parent().parent().remove();" value="Delete" />
    </td>
</tr>

该按钮将删除它所属的行。

【讨论】：