使用类选择器时,jQuery点击事件触发多次

27

这是我的 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看到这个被反复调用。

有什么想法吗?

10个回答

69

我曾经遇到过类似的问题,我的解决方案是在声明点击事件之前取消绑定点击事件。虽然这听起来有点不可思议,但我不知道如何将多个事件附加到单个HTML元素上。(而且我的HTML看起来很正常;))

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


我遇到了OP中描述的问题,但我的HTML格式良好。@user512568发布的修复方法对我有用。感谢分享。 - groundh0g
8
如果这样解决了,那么很可能是因为您在某个地方重新绑定了点击事件。重新绑定的基础知识可以在这里找到:http://www.learningjquery.com/2008/05/working-with-events-part-2 - Riko
遇到了类似的问题。$('.class').on('click', function(){}); 只对每个元素应用事件监听器。不确定为什么,但是先解除绑定似乎已经解决了这个问题。谢谢! - Shawn Whinnery

18

如果将你的<li>标签闭合,你就能解决这个问题。我已经测试过了,这样能修正它。

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

不是

<li>
<li>

我在使用img标签时遇到了类似的问题,所以@Erik是正确的。我认为每个标签都应该有</>闭合标签来解决这个问题。 - aamir sajjad

14
在我的情况下,我有多个选项卡呈现相同的部分,每个部分都有 $(document).ready() 调用,它会将点击事件绑定三次。

4
唉!我把js代码放到了局部模板的顶部,只是为了在处理它时测试一下,结果它被触发了四次。这让我很困惑,因为其他评论似乎与我的情况不符,所以感谢你指出这一点!我完全忘记了我在其他选项卡中也在使用该模板... - James Alday

9

6

尝试将id属性的值用引号括起来。当您只是输入id=1时,会发生奇怪的事情。

另外,您如何知道它会多次触发?将此行放在函数顶部并观察Firebug日志以查看发生了什么:

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

编辑:

嘿,正如其他人指出的那样... 也要确保您的标记语言是有效的 :P


同意。使用id="1",id="2",id="3"等。 - PHLAK
7
我建议您正确地关闭div和li元素。 - alex
1
在标签中使用ID属性将不会产生任何效果,只是提供信息。 - Erik
1
你的意思是将id属性值用引号括起来不会产生影响吗?首先,这是无效的XHTML。 - alex

6
我的问题在于我在创建
标签时使用了循环绑定事件,因此为每个项目重复添加事件。这只是需要仔细检查的事项。

2
正是这个问题。我在循环内使用了类选择器$(".class").click(function()),因此每次循环迭代都会添加多个点击处理程序。确保您的.click处理程序在循环外设置。 - user1507720

4
在我的情况下,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..')});
});

希望这能对某些人有所帮助...


1
从发布的HTML来看,似乎myLink DIV嵌套了,导致事件被多次触发,因为每个DIV都会接收到点击事件。请确保标签格式正确。每行末尾的DIV标签是否应该是闭合标签?

1

请确保您不会多次包含js脚本。 如果您在服务器端使用框架,请确保布局和模板未包含相同的脚本。


0

我相信大部分时间触发多次的原因是我们在循环或条件语句中绑定了多次,导致事件被触发多次。检查你的代码,确保没有重复绑定事件。

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(); 
    }

我把它绑定到另一个事件上,在每次点击时都会重新绑定,导致触发多次。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接