javascript - jQuery - 通过输入或 td 选择复选框时停止传播

Question

我想通过单击 td 本身(和/或复选框)来切换 td 内的复选框。

我有以下代码:

$("[id^=musicCheckboxHoldingTD]").on("click", function (e) {
    e.stopPropagation();
    $this = $(this);
    $this.find('.musicSelectionRoundCheckbox:checkbox').click();

});
$(".musicSelectionRoundCheckbox:checkbox").click(function(e) {
     e.stopPropagation();
     $this = $(this);
     musicCheckboxToggled($this); // this function gets called twice 
});

当我仅单击 td 时，效果非常好。

如果我单击 td 中的复选框，则由于 td 的事件和复选框的事件，该函数会被调用两次。

如何防止这种情况发生，只让该函数运行一次？

谢谢:-)

Answer 1

您真的需要两个事件吗？据我所知，仅将事件放在 td 上而不停止传播将允许您为复选框 + td 提供一个处理程序。

$("#musicCheckboxHoldingTD").on("click", function (e) {
    musicCheckboxToggled($(this));
});

如果您的 td 有其他不应触发事件的内容，您可以调整选择器并防止传播。

$("#musicCheckboxHoldingTD, #musicCheckboxHoldingTD > input[type=checkbox]").on("click", function (e) {
    e.stopPropagation();
    musicCheckboxToggled($(this));
});