使用类选择器时，jquery click 事件多次触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2024389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery click event is firing multiple times when using class selector
提问by leora
here is my html
这是我的 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>
i created a jquery event bind wiht this code:
我使用以下代码创建了一个 jquery 事件绑定：
jQuery(".myLink").click(function(event) {
var myId = this.id;
location.href = '/x/y?myId=' + myID;
});
when i click on one of the links (the li items). i thought that would fire one click event and when i call this.id, i would just get that id of the item that i clicked.
当我单击其中一个链接（li 项）时。我认为这会触发一个点击事件，当我调用 this.id 时，我只会得到我点击的项目的那个 id。
But instead it looks like the:
但它看起来像：
jQuery(".myLink").click(function(event) {
is firing over and over again even thought i just clicked on one link. I put a debugger statement in their and used firebug and saw this getting called over and over.
甚至以为我只是点击了一个链接，它一遍又一遍地射击。我在他们的里面放了一个调试器语句并使用了萤火虫，看到这个被一遍又一遍地调用。
Any ideas whats going on?
任何想法是怎么回事？
采纳答案by Erik
If you close your <li>tags, you'll fix the problem. I've just tested it, and that corrects it.
Should be
如果您关闭<li>标签，您将解决问题。我刚刚测试了它，并纠正了它。应该
<li> ... </li>
<li> ... </li>
not
不是
<li>
<li>
回答by user512568
I had a similar problem and the solution for me was to unbind the click event before declaring the click event. Doesn't make much sense but I had no idea how the multiple events get attached to a single HTML element. ( and my HTML looked valid ;) )
我有一个类似的问题，我的解决方案是在声明 click 事件之前取消绑定 click 事件。没有多大意义，但我不知道多个事件如何附加到单个 HTML 元素。（我的 HTML 看起来有效；））
$('.remove_lkc').unbind('click').click(function(){ ..........
$('.remove_lkc').unbind('click').click(function(){ ..........
回答by Pratik Khadloya
In my case, i had multiple tabs rendering the same partial and each partial had the $(document).ready() call which binded the click event thrice.
在我的例子中，我有多个选项卡呈现相同的部分，每个部分都有 $(document).ready() 调用，它绑定了三次点击事件。
回答by Johan B
Adding these two lines solved it for me:
添加这两行为我解决了这个问题：
event.stopPropagation();
event.preventDefault();
Source: http://code.google.com/intl/en/mobile/articles/fast_buttons.html
来源：http: //code.google.com/intl/en/mobile/articles/fast_buttons.html
回答by rfunduk
Try putting the value of the idattribute in quotes. Strange things happen when you just put id=1.
尝试将id属性的值放在引号中。当你把id=1.
Also, how do you know it's firing multiple times? Put this line the top of the function and watch the firebug log to see what's happening:
另外，你怎么知道它多次发射？将此行放在函数的顶部并查看萤火虫日志以查看发生了什么：
console.log( "clicked on", jQuery(this), "which has id", jQuery(this).attr('id') );
edit:
编辑：
Heh, as others have pointed out... Make sure your markup is valid too :P
呵呵，正如其他人指出的那样......确保您的标记也有效：P
回答by chrishawn
My issue was that I had my event binding in a loop when I created the <div>s, thus adding the event over and over for each item in the event. It's just something to double check.
我的问题是，当我创建<div>s 时，我的事件绑定在循环中，因此为事件中的每个项目一遍又一遍地添加事件。这只是需要仔细检查的东西。
回答by chris
In my case, the javascript has to be rendered along with the ajax request.
就我而言，javascript 必须与 ajax 请求一起呈现。
$(document).ready(function(){
$(document).on('click','.className',function(){alert('hello..')})
});
the Event fired multiple time.. used .off()to remove all previous event handlers. ( use same signature used in .on() )
事件多次触发.. 使用.off()删除所有以前的事件处理程序。（使用 .on() 中使用的相同签名）
$(document).ready(function(){
$(document).off('click','.className');
$(document).on('click','.className',function(){alert('hello..')});
});
Hope it helps some one...
希望它可以帮助某人...
回答by leepowers
From the HTML posted it looks like the myLink DIVs are nested, causing the event to be fired multiple times, as each DIV is getting the click. As noted, make sure the tags are well-formed. Are the DIV tags at the end of each line supposed to be closing tags?
从发布的 HTML 看起来 myLink DIV 是嵌套的，导致事件被多次触发，因为每个 DIV 都获得了点击。如前所述，请确保标签格式正确。每行末尾的 DIV 标签是否应该是结束标签？
回答by Snake_Tn
Make sure you are not including the js script multiple times. if you are using a framework in server site, be sure that layout and templates are not including the same script .
确保您没有多次包含 js 脚本。如果您在服务器站点中使用框架，请确保布局和模板不包含相同的脚本。
回答by A SHAHZAD
I believe the most of the time it is firing multiple times is that some how we put that in a loop or a in a condition where we are binding that multiple times causing to fire more than once. check your code and make sure that you are not binding the event multiple times.
我相信它多次触发的大部分时间是我们如何将其放入循环或在我们多次绑定的情况下导致多次触发。检查您的代码并确保您没有多次绑定该事件。
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();
}
I was binding that against another event where on each click, it was binding again causing to fire multiple times.
我将它绑定到另一个事件，在每次点击时，它再次绑定导致多次触发。
