Javascript jQuery toggleClass不'；不要使用标签

为什么

toggleClass（）

不能使用label元素？我怎样才能修好它

如果你只点击标签（而不是复选框），你会看到颜色没有改变

$（文档）.ready（函数（）{
$（'.filter set label'）。单击（函数（）{
$（this.toggleClass（'active'）；
});
});
.active{
颜色：红色；
}


标签1
标签2
标签3

此处要做的是使用复选框更改事件：

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

直接单击复选框和标签时起作用：


有关发生这种情况的原因的更多详细信息：

您只需更改事件绑定，而无需单击

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

工作示例：

说明：

事实证明，当您在标签上单击
时，它还会调用
输入：复选框上的
单击
事件（因为嵌套元素包装）。因此，标签上的第一个事件确实正确设置了类
'active'
，但是通过
复选框上的后续单击事件
将其切换回
空
（基本上删除了类'
active
）

上述影响可在此处看到：

绑定
更改
事件只会触发事件一次（仅针对
复选框
），从而正确切换类。
您提到的是委托，而不是绑定。（可能想在回答中更正）谢谢。它似乎工作正常，我不知道您可以在标签上使用change（）。标签上的更改事件无效。它会为复选框触发它，因此只执行一次。我有一个相关的问题，如果你也能回答，那就太好了，看看有没有可能在第二次单击时删除悬停状态？当复选框从选中变为未选中时。您可能需要更改某些逻辑才能执行此操作。这里有一个例子：当然。很乐意帮忙：）。星期五快乐！！