jquery - 带有标签元素的toggleClass的奇怪行为

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

看起来问题是由于当您有嵌套的 input 元素时，click 事件被触发两次(从而使切换无效)。我没有在所有浏览器上测试过，但这似乎发生在 FF8 中。

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

显然，点击 label 元素会在其关联的 input 上触发 click 事件(这就是选中/取消选中起作用的原因)，这事件向上冒泡，从而在父标签中再次触发它。