如何使用jQuery DataTables检测表中的复选框选择事件

Question

我正在使用jQuery DataTables表来使用Ajax从服务器加载数据.

我添加了一个复选框列,每次勾选复选框时都需要触发一个事件.

我怎样才能做到这一点？

Answer 1

我认为，由于您是在render函数中动态添加这些元素，因此您可以对复选框的单击事件使用事件委托。

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

参考： http: //learn.jquery.com/events/event-delegation/

代码：

$(document).on('click', '.chkRow', function () {
    alert($(this).attr('value'));
});

我找到了用于此目的的代码，该代码在行上添加了一个复选框，并在单击警报上添加了一个属性值。

演示： https: //jsfiddle.net/IrvinDominin/aqa61xdf/

Answer 2

您可以使用 (datatables)initComplete挂钩来添加事件。正如欧文·多米宁（Irvin Dominin）所说，授权是正确的出路。为每个复选框注册事件的成本非常高。事件委托利用了事件冒泡到父元素这一事实。因此，您可以在最上面的元素上注册一个侦听器，并检查发出该元素的目标元素是否是您想要的元素。

我准备了一个 JS Vanilla Fiddle，它显示了要走的路。

document.querySelector("tbody").addEventListener("change", function(e){
    if(e.target.tagName==='INPUT') console.log(e.target.parentNode.parentNode.id);
})

原则上我渲染了一张表并在整个表上放置了一个侦听器tbody。