javascript - jQuery 故障？切换类

Question

我正在学习 javascript 和 jQuery 并且遇到了一个奇怪的故障，除非我做错了什么？

或者可能是它的 jsfiddle？

你能看看下面的代码，让我知道是不是我吗？当您取消注释我注释过的代码部分时，toggleClass 将停止工作。

https://jsfiddle.net/0y4neucq/5/

$('tr.discrepancy').click(function(event) {
    $(this).toggleClass("highlight");
    /*var clicked = event.target.nodeName;
  if (clicked != "INPUT") {
    $("input[type='checkbox']", this).trigger("click");
  }*/

  $('p').html(clicked);
});

Answer 1

这是因为当您在复选框上 .trigger("click") 时，它会再次触发 $('tr.discrepancy').click() 处理程序，这是因为事件在链条上冒泡。你可以在这个 fiddle 的控制台中看到这个，我在其中添加了一个 console.log:https://jsfiddle.net/0y4neucq/11/

您可以通过添加点击处理程序并调用 event.stopPropagation() 来阻止对复选框的点击向上传播。

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

或者您可以在不触发点击的情况下选中/取消选中复选框，如下所示:

var checkbox = $(this).find("input[type='checkbox']")
checkbox.attr("checked", !checkbox.attr("checked"));