jquery - 单击事件被触发两次 - jquery

Question

我有以下简化的 html:

<div class="foo" style="width:200px; height:200px;">
  <input type="checkbox" />
</div>

<script type="text/javascript">
  $('.foo').click(function(){$(this).find('input:checkbox')[0].click();});
</script>

点击 200x200 div 'foo' 效果很好，并引发其中复选框的点击事件。

然而，当我准确地点击复选框本身时，它会触发它的“正常”事件，加上上面的 jquery 绑定(bind)事件，这意味着复选框会检查自己，然后再次取消选中自己。

有没有一种简洁的方法可以防止这种情况发生？

Answer 1

这样怎么样:不使用 div，而是使用 <label> .它在语义上更正确，完全按照您的意愿行事，并且不需要 JavaScript。

这里的工作示例:http://jsfiddle.net/LhSG9/1/