Jquery 将单击事件绑定到复选框似乎会触发两次单击

我正在尝试使用和图标字体、CSS和jQuery为表单设计样式。这是我的HTML：

<div class="checkbox">
    <input type="checkbox">
    <span aria-hidden="true" data-icon="u"></span>
</div>

它记录：

clicked
clicked

---

我原以为e.stopPropagation会有帮助，但显然没有

改用checked属性来停止click事件冒泡：

$('.checkbox').on('click', function(){
    var box = $(this).find(':checkbox');
    box.prop("checked", !box.prop("checked"));
    console.log('clicked');
});

或者，您可以针对目标进行测试，以确保仅注册对div的单击：

$('.checkbox').on('click', function(e){
    if(!$(e.target).is(":checkbox")) {
        $(this).find(':checkbox').click();
        console.log("clicked");
    }
});

---

找到了！没有评论中所说的事件冒泡。这实际上是一个预期的结果。请继续阅读原因

那么发生了什么？ 单击

div

时，将执行其处理程序

使用

.click（）

单击复选框时，将再次触发一个单击事件，因为

复选框

是

div

的子项

因此，您可以使用：

$('.checkbox').on('click', function(){
    if(event.target.nodeName!=='INPUT'){
       $(this).find(':checkbox').click();
       console.log('clicked');
    }
});

您可以使用以下选项：

$('.checkbox').on('click', function(){
    if(event.target.nodeName!=='INPUT'){
       $(this).find(':checkbox').click();
       console.log('clicked');
    }
});

上述操作将确保仅当单击了

div

时才执行该函数。

单击div（.checkbox）复选框时，自动单击事件触发，因此无需显式触发checkbox的单击事件

使用此代码：

$('.checkbox').on('click',function(e){
    console.log('clicked');
});

---

尝试用这种方法单击文本，复选框将被选中。我认为它会记录两次，因为触发的单击会冒泡到div，此时您将获得第二次单击。为什么要使用

$（this）。查找（“：checkbox”）。单击（）？这是一种冒泡的upHuangism：我就是这么想的。有没有办法防止这种情况发生？Satpal：因为输入将以绝对位置和-9999px的边距隐藏。所以我需要知道，当用户单击父div时，隐藏的输入将被单击response@AmitJoki我不太明白？更改什么选择器？你本可以做一个简单的输入[type=“checkbox”]，而不是找到它不在的地方。会返回页面上的所有复选框吗
：checkbox
相当于
输入[type=checkbox]
，我使用
find
确保范围仅限于单击的元素。。。