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

Question

我在我的jquery数据表中添加了一个新行，其中html内容（复选框输入）在某些事件上：

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

现在，当我从动态创建的行中单击“复选框”时，整个行将与复选框一起触发。 因此，下面甚至没有被触发：

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

但反过来会触发此事件：

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

知道为什么会这样吗？

Answer 1

您无法在委托事件处理程序上停止传播，因为它在处理之前已经通过DOM传播。

或者，您可以在tr单击处理程序中检查event.target ，如果是单击的复选框，则不执行任何操作：

$("#mytable tbody").on('click', 'tr', function(e) {
    if (e.target.tagName.toLowerCase() == 'input')
        return;

    $(this).addClass('selected').siblings().removeClass('selected');
})