我有一个div容器，其中包含html复选框及其标签。
使用jquery我想在有人点击此容器中的标签时触发点击事件。
使用jquery我想在有人点击此容器中的标签时触发点击事件。
当我点击标签时，我看到jquery click事件触发了两次！
出于测试目的，我在复选框上触发了click事件而不是标签
并且此处复选框单击事件触发器仅应该一次。
这是小提琴。
http://jsfiddle.net/AnNvJ/2/
<tr>
<td>
<div id="test">
<label>
<input type="checkBox" id="1" />demo1</label>
<label>
<input type="checkBox" id="2" />demo2</label>
<label>
<input type="checkBox" id="3" />demo3</label>
</div>
</td>
<td> </td>
<td> </td>
</tr>
JQUERY
$(document).ready(function () {
$('#test label').live('click',function (event) {
alert('clicked');
});
$('#test checkBox').live('click',function (event) {
alert('clicked');
});
});
解决方法
$(‘#test checkBox’)之一永远不会被调用，因为你没有带名字的标签复选框。
并且，如果您单击复选框或标签，$(‘#test label’)的回调将被调用一次或两次冒泡，因为input元素是标签的一部分并且是一个联合，因此也接收了事件如果标签是点击(它不是冒泡，你不能做event.stopPropagation())。
如果您以这种方式更改代码，则可以检查此项：
$('#test label').live('click',function (event) {
event.stopPropagation(); //<-- has no effect to the described behavior
console.log(event.target.tagName);
});
点击标签：
LABEL
INPUT
点击输入：
INPUT
编辑
如果您只想处理标签上的点击而不是复选框 – 而且您无法更改HTML结构 – 您可以忽略输入元素的事件。
这样：
$('#test label').live('click',function (event) {
if( event.target.tagName === "LABEL" ) {
alert('clicked');
}
});
或使用jQuery测试：
$('#test label').live('click',function (event) {
if( $(event.target).is("label") ) {
alert('clicked');
}
});
