无法使用dataTable jquery删除表上新添加的行答案

【问题标题】：unable to delete newly added rows on the table with dataTable jquery无法使用dataTable jquery删除表上新添加的行
【发布时间】：2014-09-25 09:59:27
【问题描述】：

我有一个 html 表，它的内容来自使用 ajax 和 php 的数据库。

当我尝试通过填写所有输入手动添加新行并单击保存按钮时，它会将数据添加到表中。

我的问题是当我尝试删除新添加的行并单击它不会删除的特定行上的删除按钮时。但是当我尝试删除来自数据库的行时，它会从 html 表中删除。

脚本：

$.ajax({
url: 'process.php',
type: 'post',
data: {tag: 'getData'},
dataType: 'json',
success: function(data){
        if(data.success){
            $("#myTable2 tbody").empty(); 
            $.each(data, function(index, record){
                if($.isNumeric(index)){
                    var row = $("<tr />");
                    $("<td />").text(record.name).appendTo(row);
                    $("<td />").text(record.age).appendTo(row);
                    $("<td />").text(record.gender).appendTo(row);
                    $("<td />").html(record.action).appendTo(row);
                    row.appendTo("#myTable2 tbody");
                }
            })
            }   

            var oTable = $('#myTable2').DataTable();

            $("#myTable2 tbody .dltRow").bind( 'click', function(event) {
                var row = $(this).closest('tr').get(0);
                oTable.row(row).remove().draw();

                oTable.row($(this).closest('tr')).remove().draw();
                $(this).parent().parent().closest('tr').remove();
                oTable.fnDeleteRow(oTable.fnGetPosition(row));

            });                 

            $('#Save2').on( 'click', function () {
                var data = [
                    $('#name').val(),
                    $('#age').val(),
                    $("[name='gender']:checked").val(),
                    "<center><button type='button' class='btn btn-default dltRow'><i class='glyphicon glyphicon-trash'></i></button></center>"
                    ];

                oTable.row.add(data).draw();
            });

        }

});

【问题讨论】：

标签： javascript jquery html ajax datatable

【解决方案1】：

使用事件委托将事件附加到动态添加的删除按钮。

 $("#myTable2 tbody").on( 'click','.dltRow', function(event) {
            var row = $(this).closest('tr').get(0);
            oTable.row(row).remove().draw();

            oTable.row($(this).closest('tr')).remove().draw();
            $(this).parent().parent().closest('tr').remove();
            oTable.fnDeleteRow(oTable.fnGetPosition(row));

        });

【讨论】：