带有标签元素的toggleClass的奇怪行为
今天早些时候我回答了这个问题 。 问题是用jQuery切换label元素上的类。 请考虑以下HTML：
以下是jQuery：
$("#test").click(function() { $(this).toggleClass("testClass"); });
当我点击label我希望将testClass类应用于该元素（因为它在页面加载时没有该类）。 然而，没有任何反应。 在这里亲自看看。 我没有在IE中试过它，但它在Chrome或Firefox中无法正常工作。 我相信它可以在以前与之相关的问题中使用IE。
单步执行jQuery源代码中的toggleClass方法 ，似乎发生的事情是直接添加和删除类。
如果将input元素移动到label之外，则会按预期添加类：
你可以在这里看到一个在行动。 所以，我的问题是为什么第一个例子似乎没有在第一次点击时添加类？ 我错过了一些明显的东西吗？
看起来这个问题源于当你有一个嵌套的input元素时， click事件被触发两次（从而使切换无效）。 我没有在所有浏览器上测试它，但这似乎发生在FF8中。
尝试单击此示例中的标签： http ： //jsfiddle.net/cRnJS/
显然，点击label元素会在其关联的input上触发click事件（这就是检查/取消选中的原因），此事件会向上冒泡，从而在父label再次触发它。