使用类选择器时，jquery click 事件多次触发答案

【问题标题】：jquery click event is firing multiple times when using class selector使用类选择器时，jquery click 事件多次触发
【发布时间】：2011-01-02 17:19:52
【问题描述】：

这是我的html

<li><div class="myLink" id=1>A<div>
<li><div class="myLink" id=2>b<div>
<li><div class="myLink" id=3>c<div>
<li><div class="myLink" id=4>d<div>
<li><div class="myLink" id=5>d<div>
<li><div class="myLink" id=6>e<div>
<li><div class="myLink" id=7>d<div>
<li><div class="myLink" id=8>g<div>

我用这段代码创建了一个 jquery 事件绑定：

    jQuery(".myLink").click(function(event) {

         var myId = this.id;

         location.href = '/x/y?myId=' + myID;
   });

当我点击其中一个链接（li 项目）时。我认为这会触发一次点击事件，当我调用 this.id 时，我只会得到我点击的项目的 id。

但它看起来像：

   jQuery(".myLink").click(function(event) {

一遍又一遍地触发，即使我只是点击了一个链接。我在他们的调试器语句中使用了 firebug 并看到它被一遍又一遍地调用。

有什么想法吗？

【问题讨论】：

标签： jquery html css-selectors click

【解决方案1】：

我遇到了类似的问题，我的解决方案是在声明点击事件之前取消绑定点击事件。没有多大意义，但我不知道多个事件如何附加到单个 HTML 元素。（而且我的 HTML 看起来有效；））

$('.remove_lkc').unbind('click').click(function(){ ..........

【讨论】：

我遇到了 OP 中描述的问题，但我的 HTML 格式正确。 @user512568 发布的修复对我有用。感谢分享。
如果修复了它，您可能在途中某处重新绑定了点击事件。这里讨论了重新绑定的基础知识：learningjquery.com/2008/05/working-with-events-part-2
遇到了类似的问题。 $('.class').on('click', function(){});只是将事件侦听器应用于所有其他元素。不知道为什么，但首先解除绑定似乎已经修复了它。谢谢！

【解决方案2】：

如果您关闭 <li> 标记，您将解决问题。我刚刚测试了它，并纠正了它。应该是

<li> ... </li>
<li> ... </li>

不是

<li>
<li>

【讨论】：

img 标签也有类似的问题，所以@Erik 是对的。我认为，每个标签都应该有 > 结束标签来摆脱这个问题。

【解决方案3】：

在我的例子中，我有多个选项卡呈现相同的部分，每个部分都有 $(document).ready() 调用，它绑定了三次点击事件。

【讨论】：

天啊！我将我的 js 插入部分模板的顶部，只是为了在我处理它时对其进行测试，它会触发四次。让我摸不着头脑，因为其他 cmets 似乎不适合我的情况，所以感谢您指出这一点！我完全忘记了我在其他选项卡的其他地方使用模板...

【解决方案4】：

添加这两行为我解决了它：

event.stopPropagation();
event.preventDefault();

来源： http://code.google.com/intl/en/mobile/articles/fast_buttons.html

【讨论】：

【解决方案5】：

尝试将id 属性的值放在引号中。当您输入id=1 时会发生奇怪的事情。

另外，你怎么知道它会发射多次？将此行放在函数的顶部并观察 firebug 日志以查看发生了什么：

console.log( "clicked on", jQuery(this), "which has id", jQuery(this).attr('id') );

编辑：

嘿，正如其他人指出的那样...确保您的标记也有效：P

【讨论】：

同意。使用 id="1"、id="2"、id="3" 等。
我还建议您正确关闭 div 和 li 元素。
在标签中包含 ID 属性将没有效果，仅供参考
您的意思是在引号中包含 id 属性的值将没有效果吗？一方面，它是无效的 XHTML。

【解决方案6】：

我的问题是，当我创建 <div>s 时，我的事件绑定在一个循环中，因此为事件中的每个项目一遍又一遍地添加事件。只是需要仔细检查。

【讨论】：

正是这个问题。我在循环内使用了一个类选择器 $(".class").click(function()) 所以我在每次循环迭代时添加了多个点击处理程序。确保您的 .click 处理程序设置在循环之外。

【解决方案7】：

在我的例子中，javascript 必须与 ajax 请求一起呈现。

$(document).ready(function(){
    $(document).on('click','.className',function(){alert('hello..')})
});

事件多次触发.. 使用 .off() 删除所有以前的事件处理程序。（使用 .on() 中使用的相同签名）

$(document).ready(function(){
    $(document).off('click','.className');
    $(document).on('click','.className',function(){alert('hello..')});
});

希望对某人有所帮助...

【讨论】：

谢谢！也拯救了我的一天

【解决方案8】：

从发布的 HTML 来看，myLink DIV 似乎是嵌套的，导致事件被多次触发，因为每个 DIV 都获得了点击。如前所述，确保标签格式正确。每行末尾的 DIV 标签是否应该是结束标签？

【讨论】：

【解决方案9】：

确保您没有多次包含 js 脚本。如果您在服务器站点中使用框架，请确保布局和模板不包含相同的脚本。

【讨论】：

【解决方案10】：

我相信它被多次触发的大部分时间是我们如何将其置于循环中或在我们绑定多次导致多次触发的条件下。检查您的代码并确保您没有多次绑定事件。

in my case i have below event
--------------------------------------------------------------------
    bindSelectYesNoHeathCare = () =>
    {
        $(document).on('click', '.healthCareTypeClass', function (event)
    }

   showHideDivs = (id: number,
                    changeNavigationMenu: boolean = true,
                    loadDataFromServer:boolean = false,
                    validateHealthCareScreens = false) =>
    {
       ChildMgr.bindSelectYesNoHeathCare(); 
    }

我将它绑定到另一个事件，每次点击时，它都会再次绑定导致多次触发。

【讨论】：