jQuery切换类在chrome中不起作用(jQuery 2.1.0)

Question

我在一个项目中使用 jQuery 2.1.0，并且 toogleClass() 遇到一些奇怪的问题，这是我的代码:

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

jsfiddle 的演示 DEMO

它不能在 Chrome 上运行，但可以在我的 iPad 上运行，有人可以帮忙吗？

谢谢

Answer 1

在这种情况下，您应该更好地将事件监听器绑定(bind)到复选框本身以防止双击事件:

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

发生这种情况的原因很简单。标签类别为相应的输入元素生成另一个事件。由于 jQuery on 方法在冒泡阶段绑定(bind)一个事件，因此当第二个“虚拟”事件从复选框向上传播到标签时，它会再次触发您的事件处理程序。因此出现了这个问题。

演示:http://jsfiddle.net/x3a32/2/