9

当我在标签中添加一个选择并为单击事件绑定时，jquery 会触发两次。

http://jsfiddle.net/d8Ax7/

html:

<label class="lol">
    <div>
        bla
    </div>
    <div style="display:none;">
        <select></select>
    </div>
</label>

javascript:

$("label.lol").on({
    click : function ()
    {
        alert(1);
    }
})

如何在不向标签添加“for”属性的情况下修复此错误？

4

9 回答 9

5

我知道这个问题已经有很多答案，但很模糊。

$("label.lol").on({
    click : function ()
    {
        alert(1);
        return false;
    }
});

好的，大家赞赏。问题解决了。但是问题出现了为什么return false;。

用简单的话回答：这是一种告诉计算机从函数返回，我给你的任务已经完成的方法。现在没有更多的混乱。

于 2013-02-08T15:36:11.913 回答
2

您可以尝试使用标签的“for”属性将其链接到其外部的选择。看我的例子

<label for="test" class="lol">
    <div>
        bla
    </div>
</label>

<div style="display:none;">
    <select id="test"></select>
</div>

http://jsfiddle.net/d8Ax7/1/

于 2013-02-08T15:26:45.477 回答
0 
$("label.lol").off("click").on(//...

但是如果它触发了两次，那肯定意味着你已经绑定了两次，所以使用 .off 比解决问题的最佳解决方案更像是一种黑客攻击，这将是了解你最终如何绑定两次这个事件......当然你展示的代码无法解释这种双重束缚

编辑：&在你的小提琴中它确实只触发一次......

于 2013-02-08T15:24:19.407 回答
0

这样它也可以工作，但我不完全理解你想要做什么......并且标签应该只包含选择的标签文本而不包含选择本身..

   $("label.lol div:first").on({
        click : function ()
        {
            alert(1);
        }
    })
于 2013-02-08T15:27:11.093 回答
0

覆盖单击时有两个选项，请查看此堆栈溢出问题以获取更多详细信息，但总结一下，试试这个...

$("label.lol").click(function () {
        alert(1);
        return false;
});
于 2013-02-08T15:29:33.883 回答
0

你的标记太可怕了。你的问题是 jquery 在你的标签函数内的每个 div 上执行点击事件 - 意味着两次。你应该清理你的标记并询问你想要直接点击的 div。否则使用 :first 确保事件只触发一次：

$('.lol div:first').click(function ()
{
    alert("1");
})
于 2013-02-08T15:29:50.837 回答
0

您应该添加 e.preventDefault();

$("label.lol").on({
  click : function (e)
  {
    alert(1);
    e.preventDefault();
  }
});
于 2013-02-08T15:31:20.840 回答
0

您的问题在于元素之间的区别。例如，您应该使用:first-child选择器选择标签的第一个子项，或者给它一个id：

HTML：

<label class="lol">
    <div id="first-child">
        bla
    </div>
    <div style="display:none;">
        <select></select>
    </div>
</label>

JS：

$("#first-child").on('click',function (){
        alert(1);
});

http://jsfiddle.net/d8Ax7/5/

于 2013-02-08T15:44:18.980 回答
0

尝试使用 CSS 进行过滤：添加一个中间类clicked来阻止第二次警报（或任何操作），然后删除.clicked为下一轮做好准备。

$("label.lol").on({
    click : function ()
    {
        if (! $(this).hasClass('clicked'))
            alert(1);
        $(this).toggleClass('clicked');
    }
})
于 2013-02-08T16:01:05.237 回答