动态创建复选框单击事件，选择整行，而不仅仅是jquery数据表中的复选框.为什么呢?

Dynamically created checkbox click event selecting the whole row instead of only the check box in a jquery datatable. Why is that?

本文关键字：复选框 数据表 jquery 为什么呢 不仅仅是 单击 创建 事件 选择 动态      更新时间：2023-09-26

我已经添加了一个新的行在我的jquery数据表与html内容(复选框输入)的一些事件:

$("#btn").on( 'click', function (){
    $('#mytable').DataTable().row.add([data[0],data[1],"<td><input type='"checkbox'" value='"'" /></td>"]).draw();
}

现在，当我单击动态创建行的"复选框"时，整个行将随着复选框一起被触发。因此，下面的even不会被触发:

$('input[type=checkbox]').on( 'click', function (e){
    e.stopPropagation();
});

但是反过来触发这个事件:

$("#mytable tbody").on( 'click', 'tr', function (){
   $(this).addClass('selected').siblings().removeClass('selected');
 ....
}

知道为什么会这样吗?

你不能停止在委托事件处理程序上的传播，因为它在被处理之前已经通过DOM传播了。

或者，您可以在tr单击处理程序中检查event.target，如果它是被单击的复选框，则不做任何工作:

$("#mytable tbody").on('click', 'tr', function(e) {
    if (e.target.tagName.toLowerCase() == 'input')
        return;
    $(this).addClass('selected').siblings().removeClass('selected');
})
相关文章：