单击 html 标签时，Jquery 单击事件触发两次 [英] Jquery click event triggers twice when clicked on html label

问题描述

我有一个 div 容器，其中包含 html 复选框及其标签.使用 jquery 我想在有人点击此容器中的标签时触发点击事件.

我看到当我点击标签时 jquery click 事件触发了两次！

出于测试目的，我在复选框而不是标签上触发了单击事件此处复选框单击事件仅按原样触发一次.

这是小提琴.http://jsfiddle.net/AnNvJ/2/

<td><div id="测试"><标签><input type="checkbox" id="1"/>demo1</label><标签><input type="checkbox" id="2"/>demo2</label><标签><input type="checkbox" id="3"/>demo3</label>

</td><td>&nbsp;</td><td>&nbsp;</td></tr>

查询

$(document).ready(function () {$('#test label').live('click', function (event) {警报('点击');});$('#test checkbox').live('click', function (event) {警报('点击');});});

解决方案

$('#test checkbox') 永远不会被调用，因为你没有名称为 <代码>复选框.

并且取决于您是点击复选框还是标签，$('#test label') 的回调将被调用一次或两次 cause of the bubbling 因为input 元素是标签的一部分，并且是一个 union 并且因此如果标签是点击也会收到事件(它不是冒泡，你不能做 event.stopPropagation()).

如果您以这种方式更改代码，则可以检查这一点:

 $('#test label').live('click', function (event) {event.stopPropagation();//<-- 对描述的行为没有影响console.log(event.target.tagName);});

点击标签:

<块引用>

标签
输入

点击输入:

<块引用>

输入

编辑如果您只想处理对 label 的点击而不是复选框 - 并且您无法更改 HTML 结构 - 您可以忽略 的事件>input 元素.

要么这样:

$('#test label').live('click', function (event) {if( event.target.tagName === "标签" ) {警报('点击');}});

或者使用jQuery来测试:

$('#test label').live('click', function (event) {if( $(event.target).is("label") ) {警报('点击');}});

I have an div container which contains html checkbox and its label. Using jquery i wanted to trigger an click event when someone clicks on label in this container.

I see that jquery click event triggers twice when i click on label!

For testing purpose i triggered click event on checkbox instead of label and here checkbox click event triggers only once as it should be.

Here is the fiddle. 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>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

JQUERY

$(document).ready(function () {

    $('#test label').live('click', function (event) {
        alert('clicked');
    });


    $('#test checkbox').live('click', function (event) {
        alert('clicked');
    });

});

解决方案

The one of $('#test checkbox') is never called, because you don't have a tag with name checkbox.

And depending if you click on checkbox or the label, the callback for $('#test label') is called once or twice cause of the bubbling because the input element is part of the label and is one union and therefore also received the event if the label is click (it is not bubbling, you can't do event.stopPropagation()).

You can check this if you change your code this way:

 $('#test label').live('click', function (event) {
        event.stopPropagation(); //<-- has no effect to the described behavior
        console.log(event.target.tagName);
 });

Click on label:

LABEL
INPUT

Click on input:

INPUT

EDIT If you only want to handle the click on the label and not the checkbox - and you can't change your HTML structure - you can just ignore the event of the input element.

Either this way:

$('#test label').live('click', function (event) {
    if( event.target.tagName === "LABEL" ) {
         alert('clicked');
    }
});

Or using jQuery to test:

$('#test label').live('click', function (event) {
    if( $(event.target).is("label") ) {
         alert('clicked');
    }
});

这篇关于单击 html 标签时，Jquery 单击事件触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！