jquery - jQuery clicks events on flow to add/remove rows from table

Question

I add with jQuery dynamically on click new rows to my table, on the other hand I have a function which can remove rows on button click. My problem that dynamically added rows cannot be deleted if I try to delete after when I added.

//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()
    });

Answer 1

由于表行是动态添加的，因此需要使用事件委托来注册事件处理程序

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

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

参考：

• http://api.jquery.com/on/
• http://learn.jquery.com/events/event-delegation/

Answer 2

尝试在您的 tr html 中使用类似的内容：

<tr>
    // whatever ...

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

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