有問題刪除數據表中的特定行

Question

我想要做的是在我在表中添加數據后，我可以選擇是否在動作列中刪除它。

我的問題是，如果我按下我要刪除的特定行上的刪除按鈕，刪除表中不想刪除的一些內容。 有時它會刪除表格的所有內容。

腳本： http ： //jsfiddle.net/4GP2h/5/

 oTable = $('#myTable').dataTable();

       var data = [
             $('#name').val(),
             $('#age').val(),
             $("#gender:checked").val(),
             "<button class='delete'>Delete</button>"
          ];

          oTable.fnAddData(data);



$('.delete').click(function(){
    var row = $(this).closest('tr');
    oTable.fnDeleteRow(row[0]);
});

Answer 1

每次創建行時，都會在已經存在的刪除之上綁定另一個delete事件。 因此，如果您在行中生成3個項目，則刪除綁定看起來像：

ROW1 // <- Deletes on ROW1 'Delete' clicks
ROW2 // <- Deletes on ROW1, ROW2 'Delete' clicks
ROW3 // <- Deletes on ROW1, ROW2, ROW3 'Delete' clicks

所以在ROW1上點擊delete基本上會在它之后創建的每一行上調用delete。

解決方法是移動$('.delete').click(function(){...}); save事件之外的代碼，因此每次保存/添加新行時，您都不會在刪除綁定上堆疊。

但是，由於您正在動態添加新的DOM元素，我們將希望以稍微不同的方式監視刪除事件，以便我們可以將delete代碼綁定到任何新添加的按鈕/行。

現在您的代碼應如下所示：

// Moved outside save function to reference other places
oTable = $('#myTable').dataTable();

$('#Save').click(function () {
    if ($('#name').val() == '' || $('#age').val() == '' || $("input[name='gender']:checked").val() == undefined) {
        $("#dialog-confirm").dialog("open");

    } else {

        var data = [
        $('#name').val(),
        $('#age').val(),
        $("#gender:checked").val(),
            "<button class='delete'>Delete</button>"];

        oTable.fnAddData(data);
    }
});

// Moved outside save function and changed how the event bindings occur
$(document).on('click', '.delete', function () {
    var row = $(this).closest('tr');
    oTable.fnDeleteRow(row[0]);
});

你可以在這里看到工作版本