jQuery toggleClass不能与label一起使用

Question

为什么toggleClass()不能与元素一起使用？如何解决？

如果只单击标签（而不是复选框），您会发现颜色没有变化。 jsFiddle

$(document).ready(function() {
  $('.filter-set label').click(function() {
    $(this).toggleClass('active');
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-set">
  <ul>
    <li><label><input name="checkbox" type="checkbox"> label 1</label></li>
    <li><label><input name="checkbox" type="checkbox"> label 2</label></li>
    <li><label><input name="checkbox" type="checkbox"> label 3</label></li>
  </ul>
</div>

- Stickers

Answer 1

您只需要将事件绑定从click更改为change即可。

$('.filter-set label').change(function() {
    $(this).toggleClass("active");
  });

工作示例：http://jsfiddle.net/DinoMyte/8gz0jsnq/5/

解释：

事实证明，当您单击标签时，它也会在input:checkbox上调用click事件（因为嵌套元素包装）。因此，标签上的第一个事件正确设置了类'active'，但由于checkbox上的随后的点击事件将其切换回empty（基本上删除了类'active'）。

上述内容的影响可以在这里看到：http://jsfiddle.net/DinoMyte/8gz0jsnq/6/

绑定change事件只会触发一次事件（仅适用于checkbox），这将正确地切换类。

- DinoMyte

---

谢谢。看起来运行良好，我不知道标签上可以使用change()。 - Stickers

标签上的更改事件无效。它会触发复选框，因此只执行一次。 - DinoMyte

我有一个相关的问题，如果您能回答，那太好了。请参见http://jsfiddle.net/8gz0jsnq/7/，是否可能在第二次单击时从已选中更改为未选中时移除悬停状态？ - Stickers

你可能需要更改一些逻辑来实现这个。这里有一个例子：http://jsfiddle.net/DinoMyte/8gz0jsnq/9/ - DinoMyte

当然，很高兴能帮忙 : )。祝你周五愉快！！ - DinoMyte

Answer 2

在这里你需要使用复选框改变事件：

$("input[type=checkbox]").on('change', function () {
  $(this).parent().toggleClass("active");
});

当直接点击复选框和标签时可正常工作：

https://jsfiddle.net/s6fx1Lez/

关于为什么会发生这种情况的更多细节：

https://dev59.com/c13Va4cB1Zd3GeqPFfUy#8386513

- jszobody

---

你提到的是委托，而非绑定。（在答案中可能需要更正） - DinoMyte