jQuery故障？toggleClass

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()处理程序，这是因为事件在链中向上冒泡。您可以在控制台的这个小提琴上看到这一点，我在其中添加了一个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"));