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

Posted 2023-05-09

【中文标题】动态创建的复选框单击事件选择整行，而不仅仅是 jquery 数据表中的复选框。这是为啥？

【英文标题】：Dynamically created checkbox click event selecting the whole row instead of only the check box in a jquery datatable. Why is that?动态创建的复选框单击事件选择整行，而不仅仅是 jquery 数据表中的复选框。这是为什么？

【发布时间】：2017-02-22 19:35:22

【问题描述】：

我在我的 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');
 ....

知道为什么会这样吗？

【问题讨论】：

尝试在你的最后一个 sn-p 上做一个.not，因为我相信它会在元素内的 anything 被点击时被触发。 $("#mytable tbody").not('input[type="checkbox"]').on...。 （作为评论发布，因为我相信可能会有更好的答案。请参阅下面的Rory McCrossan's 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');
)

【讨论】：

不要认为你会阻止点击传播

@charlietfl 你是对的。脑袋放屁。今天就够了:)

完美运行:)

代码为： if (e.target.tagName.toLowerCase() == 'input') $('#mytable').DataTable().row( this ).deselect();返回;