单击标签不会触发单击事件

我有这个代码：

True? 

和

 $("label").click(function () { $(this).toggleClass("active"); }); 

单击复选框类切换时，单击“True？” 什么都没发生。 为什么？

然后，如果我不在标签中包装复选框一切正常。

 True? 

这太奇怪了……如果我把“换”也没关系也没关系。

http://jsfiddle.net/zufs6ueh/1/

这里出了什么问题？

Answer 1

这样使用会更安全：

 $(function() { $('input[type="checkbox"]').bind('change', function (v) { if($(this).is(':checked')) { $(this).parent().addClass('active'); } else { $(this).parent().removeClass('active'); } }); }); 

使用change而不是click允许使用键盘导航表单的人员。

Answer 2

单击标签也会触发对输入的单击，因此将更改事件绑定到复选框本身：

 $(function(){ $("label input").on("click",function(){ $(this).parent().toggleClass("active"); }); }); 

 .active {color:red;} 

  True?