如何在数据表中强制执行 .change() 事件？

Question

我正在使用 jQuery 数据 Table 和一些自定义代码来为网站构建比较篮。

我知道 .change() 会强制更改事件，但是当我在 DataTables 中执行此操作时，它似乎不起作用。

这是有问题的代码：

table.on('change', '[type="checkbox"]', function () {
~
~
~
removeCtrl.addEventListener('click', function () {
    var removal_id = $(this).parent().data("idx");

    // .change() forces the 'changed' event to trigger.
    $('#' + removal_id).prop('checked', false).change();

    $(this).parent().remove();
});
});

此代码附在图片右上角的小"X"中。图像本身完全在 DataTables.

之外

此行找到需要取消选中的确切复选框并取消选中它，然后它应该触发 change 事件，但这似乎不起作用。它适用于我所在的任何页面。但是，如果我在第 2 页，而需要取消选中的复选框在第 1 页，它会取消选中它，但不会触发我需要触发的更改事件。

我也试过 table.$('#' + removal_id).prop('checked', false).change(); 也是一样的。 Table 引用数据Table 对象。

当我与需要取消选中的复选框位于同一页面时，更改事件会正确触发。

知道我需要更改什么才能在与复选框不在同一页面上时触发更改事件吗？

Answer 1

CAUSE

DOM 中不存在其他页面上的元素。如下所示使用的委托事件处理程序仅适用于 DOM.

中存在的元素

table.on('change', '[type="checkbox"]', function(){});

SOLUTION

将匿名函数替换为 change 事件处理程序的命名函数，例如 onCheckboxChange，如下所示。

function onCheckboxChange(e){
   console.log(this);
}

// ... skipped ...

table.on('change', '[type="checkbox"]', onCheckboxChange);

然后当你需要触发复选框的句柄change事件时，使用下面的代码：

$('#' + removal_id)
   .prop('checked', false)
   .each(function(){
      onCheckboxChange.call(this);
   });

如何在数据表中强制执行 .change() 事件？

How do I force a .change() event within Datatables?

jquery

datatables