单击标签时，jQuery Click 会触发两次

Question

我正在使用 jQuery 创建自定义单选按钮，但我遇到了问题。 当点击与收音机关联的标签时，点击事件会触发两次，如果我只点击收音机本身它工作正常（实际上它不是我点击的收音机，而是包装整个输入和标签的 div）。代码如下：

HTML：

 <div id="box">
     <asp:RadioButtonList ID="RadioButtonList1" runat="server">
         <asp:ListItem>RADIO1</asp:ListItem>
         <asp:ListItem>RADIO2</asp:ListItem>
         <asp:ListItem>RADIO3</asp:ListItem>
     </asp:RadioButtonList>
</div>

jQuery:

<script type="text/javascript">
       $(function () {
            $('#box').find('input:radio').each(function (i) {

            var input = $(this);
            // get the associated label using the input's id
            var label = $('label[for=' + input.attr('id') + ']');
            // wrap the input + label in a div
            $('<div class="custom-radio"></div>').insertBefore(input).append(label, input);

            var wrapperDiv = input.parent();

            // find all inputs in this set using the shared name attribute
            var allInputs = $('input[name=' + input.attr('name') + ']');

            // necessary for browsers that don't support the :hover pseudo class on labels
            label.hover(

            function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover checkedHover');
            });

            //bind custom event, trigger it, bind click,focus,blur events
            wrapperDiv.bind('updateState', function () {
                if ($(this)[0].children[1].checked) {
                    allInputs.each(function () {
                        var curDiv = $('div > label[for=' + $(this).attr('id') + ']').parent();
                        curDiv.removeClass('custom-radio-checked');
                        curDiv.addClass('custom-radio');
                    });
                    $(this).toggleClass('custom-radio custom-radio-checked');
                }
                else {
                    $(this).removeClass('custom-radio-checked checkedHover checkedFocus');
                }

            })
            .trigger('updateState')
            .click(function () { console.log('click'); })
            .focus(function () {
                label.addClass('focus');
            }).blur(function () {
                label.removeClass('focus checkedFocus');
            });
        }); 
       });
   </script>

这种行为有什么解决办法吗？

Answer 1

我尝试通过添加添加上述解决方案：

evt.stopPropagation();
evt.preventDefault();

但是没有用。但是添加这个：

evt.stopImmediatePropagation();

解决了问题！ :)

Answer 2

尝试添加：

evt.stopPropagation();
evt.preventDefault();

到 .bind() 或 .click()，无论你看到什么。另外，在函数中添加参数evt，如function(evt) {...

Answer 3

将点击事件绑定到输入而不是标签。单击标签时 - 该事件仍会发生，因为正如 Dustin 所提到的，单击标签会触发对输入的单击。这将允许标签保持其正常功能。

$('input').click();

代替

$('label').click();

Answer 4

如果您尝试使用外部容器作为点击元素，您还可以让事件自然冒泡并在点击处理程序中测试预期元素。如果您尝试为表单设置唯一点击区域的样式，此方案非常有用。

<form>
<div id="outer">
    <label for="mycheckbox">My Checkbox</label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="on"/>
</div>
</form>
<script>
$('#outer').on('click', function(e){
    // this fires for #outer, label, and input
    if (e.target.tagName == 'INPUT'){
        // only interested in input
        console.log(this);
    }
});
</script>

Answer 5

要轻松解决此问题，请删除标签上的“for”属性。点击标签也会触发点击相关元素。 （在您的情况下会触发您的点击事件两次。）

祝你好运

Answer 6

我通常使用这个合成器

.off('click').on('click', function () { console.log('click'); })

而不是

.click(function () { console.log('click'); })

Answer 7

最佳答案隐藏在 cmets 中：

您实际上应该绑定到change，即使是在单选按钮上，因为 标签的文本是可点击的——他们并不总是点击收音机 按钮本身。 – chovy 2013 年 12 月 12 日 1:45

这个fiddle 说明了所有其他解决方案——stopPropagation、stopImmediatePropagation、preventDefault、return false——要么不做任何改变，要么破坏复选框/收音机功能）。它还说明这是一个普通的 JavaScript 问题，而不是 jQuery 问题。

编辑： 我刚刚发现in another thread 的另一个可行解决方案是将onclick 绑定到输入而不是标签。 Updated fiddle.

Answer 8

我尝试过添加解决方案。

evt.stopPropagation();
evt.preventDefault();

但没用。

通过添加

evt.stopImmediatePropagation();

解决了问题！ :)

Answer 9

e.preventDefault() 的问题；它是否会阻止标签单击检查单选按钮。

更好的解决方案是简单地添加“已检查”快速检查，如下所示：

$("label").click(function(e){
  var rbtn = $(this).find("input");
  if(rbtn.is(':checked')){
  **All the code you want to have happen on click**
  }
)};

Answer 10

我的问题有点不同，因为evt.stopPropagation();evt.preventDefault(); 对我不起作用，我只是在最后添加return false;，然后就可以了。

$("#addressDiv").on("click", ".goEditAddress", function(event) {
    alert("halo");
    return false;
});

Answer 11

在我的情况下，问题是我在函数中有点击事件并且函数执行了两次....函数的每次执行都会创建一个新的点击事件。 -捂脸-

将点击事件移到函数外后，一切都按预期进行！ :)

Answer 12

试着把你的输入标签放在触发元素之外，因为标签标签模拟点击，所以你总是会有多个调用。

Answer 13

我遇到了同样的问题，因为我将收音机嵌套在这样的标签内，处理程序附加到 radio_div。移除嵌套标签解决了这个问题。

<div id="radio_div">
    <label>
       <input type="radio" class="community_radio" name="community_radio" value="existing">
           Add To Existing Community
    </label>
</div>

Answer 14

标签触发单选框/复选框被选中。

if ($(event.target).is('label')){
    event.preventDefault();
}

它特别防止标签触发这种行为。

Answer 15

点击带有 for="some-id" 属性的标签会触发新的点击，但前提是目标存在并且是输入。我无法用 e.preventDefault() 或类似的东西完美地解决它，所以我这样做了：

例如，如果您有这种结构并希望在单击 .some-class 时发生事件

<div class="some-class">
    <input type=checkbox" id="the-input-id" />
    <label for="the-input-id">Label</label>
</div>

起作用的是：

$(document)
    .on('click', '.some-class', function(e) {
        if(
            $(e.target).is('label[for]')
            &&
            $('input#' + $(e.target).attr('for')).length
        ) {
            // This will trigger a new click so we are out of here
            return;
        }

        // else do your thing here, it will not get called twice
    })
;

Answer 16

$(document).on('click','.class',function() {
    alert('abc')
})

在我的情况下，它触发了 2 次，因为我将这段代码包含了 2 次，例如 assets/js/test.js 2 次。