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

Question

我正在使用jQuery DataTables来创建一个使用Ajax从服务器加载数据的表。

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

我该怎么做？

Answer 1

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

  

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

参考：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上。