Question

今天早些时候我回答this question。问题是用jQuery在label元素上切换类。请考虑以下HTML：

<label id="test">Test <input type="checkbox"></label>

以下jQuery：

$("#test").click(function() {
    $(this).toggleClass("testClass");
});

当我点击label时，我希望将testClass类应用于该元素（因为它在页面加载时没有该类）。然而，没有任何反应。亲眼看看here。我没有在IE中试过它，但它在Chrome或Firefox中无法正常工作。我相信它可以在以前链接的问题中使用IE。

单步执行toggleClass method in the jQuery source，似乎会发生这样的情况，即会立即添加并删除该类。

如果您将input元素移到label之外，则会按预期添加该类：

<label id="test" for="cb">Test</label>
<input type="checkbox" id="cb">

你可以看到行动here。所以，我的问题是为什么第一个例子似乎没有在第一次点击时添加类？我错过了一些明显的东西吗？

Answer 1

看起来这个问题源于这样一个事实：当你有一个嵌套的click元素时，input事件被触发两次（从而使切换无效）。我没有在所有浏览器上测试它，但这似乎发生在FF8中。

尝试点击此示例中的标签：http://jsfiddle.net/cRnJS/

显然，点击label元素会在其关联的click上触发input事件（这就是检查/取消选中的原因）并且此事件会向上冒泡，从而再次触发它在父label中。