jquery给label绑定click事件被触发两次解决方案
首先我们看下面的代码片段（label包裹checkbox）
<div class="example"><label for="chk_6" class="label-1">选项6<input class="chkbox-1" type="checkbox" id="chk_6" value="1"></label></div> <div class="example"><label for="chk_7" class="label-1">选项7<input class="chkbox-1" type="checkbox" id="chk_7" value="1"></label></div> <div class="example"><label for="chk_8" class="label-1">选项8<input class="chkbox-1" type="checkbox" id="chk_8" value="1"></label></div> <div class="example"><label for="chk_9" class="label-1">选项9<input class="chkbox-1" type="checkbox" id="chk_9" value="1"></label></div> <div class="example"><label for="chk_10" class="label-1">选项10<input class="chkbox-1" type="checkbox" id="chk_10" value="1"></label></div>
// 绑定label的click事件 $('.label-1').click(function (e) { console.log($(this).text()); });
点击文字，再观察控制台我们会发现一个现象！！（代码被执行两次）
解决方案一（修改html结构label和checkbox同级）：
<div class="example"><label for="chk_6" class="label-1">选项6<input class="chkbox-1" type="checkbox" id="chk_6" value="1"></label></div> <div class="example"><label for="chk_7" class="label-1">选项7<input class="chkbox-1" type="checkbox" id="chk_7" value="1"></label></div> <div class="example"><label for="chk_8" class="label-1">选项8<input class="chkbox-1" type="checkbox" id="chk_8" value="1"></label></div> <div class="example"><label for="chk_9" class="label-1">选项9<input class="chkbox-1" type="checkbox" id="chk_9" value="1"></label></div> <div class="example"><label for="chk_10" class="label-1">选项10<input class="chkbox-1" type="checkbox" id="chk_10" value="1"></label></div>
刷新界面再次观察控制台：
OK正常了。
解决方案二（修改js代码绑定checkbox的change事件）：
// 绑定checkbox的change事件 $('.chkbox-1').change(function (e) { console.log($(this).parent().text()); });
刷新界面，点击文字，再观察控制台：
OK正常了。