Question

我具有这段代码，当我单击选定的<td>

时，该代码块可以正常工作以从表中删除行。

var table = $('#students-table').DataTable();
$('#students-table tbody').on('click', 'i.icon-delete', function () {
    table.row($(this).parents('tr')).remove().draw();
});

但是当我将此行嵌入$ .post.done时，它根本不起作用：

var table = $('#students-table').DataTable();
$('#students-table tbody').on('click', 'i.icon-delete', function () {
    var student_id = $(this).attr('student_id');
    $.post("backend.php", {"action": "deleteStudent", "student_id": student_id}).done(function (response) {
        response = JSON.parse(response);
        if (response.deleted == "1") {
            console.log("A");
            table.row($(this).parents('tr')).remove().draw();
            console.log("B");
        }
    }); // post
});

无论条件response.deleted == "1"评估为True，并且console.log("A");和console.log("B");也可以正常工作。
那么，为什么行删除行在done()的{{1}}函数中时不起作用
请注意，问题与删除过程无关。

Answer 1

在回调this中，它引用了ajax调用的jqXHR对象，而不是事件处理程序所绑定的元素。因此table.row($(this).parents('tr')).remove().draw();不起作用。更多信息here

Answer 2

根据预览答案：'.done（）'中的this引用jqXHR而不是选择器i.icon-delete的选定元素。
解决方案是将i.icon-delete选择的选定元素$(this)分配给$.post之外的变量，然后在$.post内再次使用它。这种使用$(this)的方式是指i.icon-delete而不是jqXHR

$('#students-table tbody').on('click', 'i.icon-delete', function () {
    var rowToRemove = $(this).parents('tr');
    var student_id = $(this).attr('student_id');
    $.post("backend.php", {"action": "deleteStudent", "student_id": student_id}).done(function (response) {
        response = JSON.parse(response);
        if (response.deleted == "1") {
            table.row(rowToRemove).remove().draw();
        }
    }); // post
});

$ .post方法内的数据表行未删除

2 个答案: