jQuery toggleClass不在chrome中工作（jQuery 2.1.0）

我在一个项目中使用jQuery 2.1.0，我对

toogleClass（）

有一些wierd问题，下面是我的代码：

$('.options-item-label').on('click', function(){
    $(this).toggleClass('option-opend');
});

jsfiddle上的一个演示

它在chrome上不工作，但在我的iPad上工作，有人能帮忙吗

---

谢谢

您可以从本演示中看到，当您单击标签时，也会为输入触发一个单击事件。因此，两个单击事件被处理程序捕获，颜色被切换两次，最终到达开始的位置

您还可以看到，当您单击div右侧时，会调用处理程序，因此可以在不更改输入状态的情况下切换背景。而是将处理程序绑定到输入本身：

---

在这种情况下，您最好将事件侦听器绑定到复选框本身，以防止双击事件：

$('.options-item-label').on('click', ':checkbox', function(e) {
    $(e.delegateTarget).toggleClass('option-opend');
});

发生这种情况的原因很简单。标签排序为相应的输入元素生成一个或多个事件。由于jQuery

on

方法在冒泡阶段绑定事件，当第二个“虚拟”事件从复选框向上传播到标签时，它会再次触发事件处理程序。这就是问题所在

---

演示：你可以试试这个，

返回false

，这对我来说很有用

$('.options-item-label').on('click', function(){
   $(this).toggleClass('option-opend');
   return false;
});

---

这是一个dom就绪状态吗？是的，你是对的，现在我知道它为什么不工作了，非常感谢你的演示：）

$('.options-item-label').on('click', function(){
   $(this).toggleClass('option-opend');
   return false;
});