jQuery Button.click() 事件被触发两次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3070400/
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 Button.click() event is triggered twice
提问by user276289
I have the following problem with this code:
这段代码有以下问题：
<button id="delete">Remove items</button>
$("#delete").button({
icons: {
primary: 'ui-icon-trash'
}
}).click(function() {
alert("Clicked");
});
If I click this button, the alert show up two times. It's not only with this specific button but with every single button I create.
如果我单击此按钮，警报会显示两次。它不仅与这个特定按钮有关，而且与我创建的每个按钮有关。
What am I doing wrong?
我究竟做错了什么？
采纳答案by Nick Craver
Your current code works, you can try it here: http://jsfiddle.net/s4UyH/
您当前的代码有效，您可以在这里尝试：http: //jsfiddle.net/s4UyH/
You have something outside the example triggering another .click(), check for other handlers that are alsotriggering a clickevent on that element.
您在触发 another 的示例之外有一些东西.click()，请检查其他也在click该元素上触发事件的处理程序。
回答by Simeon Abolarinwa
In that case, we can do the following
在这种情况下，我们可以执行以下操作
$('selected').unbind('click').bind('click', function (e) {
do_something();
});
I had the event firing two times initially, when the page get refreshed it fires four times. It was after many fruitless hours before I figured out with a google search.
我最初让事件触发了两次，当页面刷新时它触发了四次。在我用谷歌搜索找到了很多无果的小时之后。
I must also say that the code initially was working until I started using the JQueryUI accordion widget.
我还必须说，在我开始使用 JQueryUI 手风琴小部件之前，代码最初是有效的。
回答by Sergey Onishchenko
Strange behaviour which I was experienced also. So for me "return false" did the trick.
我也经历过奇怪的行为。所以对我来说“返回假”成功了。
$( '#selector' ).on( 'click', function() {
//code
return false;
});
回答by nywooz
If you use
如果你使用
$( document ).ready({ })
or
或者
$(function() { });
more than once, the click function will trigger as many times as it is used.
不止一次，点击功能将根据使用次数触发。
回答by reza.cse08
you can try this.
你可以试试这个。
$('#id').off().on('click', function() {
// function body
});
$('.class').off().on('click', function() {
// function body
});
回答by Stepan
This can as well be triggered by having both inputand labelinsidethe element with click listener.
这可以作为很好地兼具触发input和label内部与点击收听的元素。
You click on the label, which triggers a click event and as wellanother click event on the inputfor the label. Both events bubble to your element.
你点击label，这将触发click事件和以及对再点击一下事件input的label。这两个事件都冒泡到您的元素。
See this pen of a fancy CSS-only toggle: https://codepen.io/stepanh/pen/WaYzzO
查看这支仅使用 CSS 的花哨切换笔：https: //codepen.io/stepanh/pen/WaYzzO
Note: This is notjQuery specific, native listener is triggered 2x as well as shown in the pen.
注意：这不是特定于 jQuery 的，本机侦听器会触发 2 次并显示在笔中。
回答by Vlad Isoc
I had the same problem and tried everything but it didn't worked. So I used following trick:
我遇到了同样的问题并尝试了所有方法，但没有奏效。所以我使用了以下技巧：
function do_stuff(e)
{
if(e){ alert(e); }
}
$("#delete").click(function() {
do_stuff("Clicked");
});
You check if that parameter isn't null than you do code. So when the function will triggered second time it will show what you want.
您检查该参数是否不为空，而不是您编写代码。因此，当该功能第二次触发时，它将显示您想要的内容。
回答by Shahid Hussain Abbasi
$("#id").off().on("click", function() {
});
Worked for me.
为我工作。
$("#id").off().on("click", function() {
});
回答by Mohammed Shareef C
This can be caused for following reasons:
这可能是由于以下原因造成的：
- Either you have included the script more than oncein the same html file
- You already added the event listener using
onclickattribute on the element - If you use
template inheritancelikeextendsindjango, most probably you have included the script in more than one filewhich are combined together byincludeorextend - The event is bubbledup to some parent element.
- If you are using
djangotemplate, you have wrongly placed ablockinside another.
- 您在同一个 html 文件中多次包含该脚本
- 您已经使用
onclick元素上的属性添加了事件侦听器 - 如果您使用
template inheritancelikeextendsindjango，很可能您已将脚本包含在多个文件中，这些文件由include或组合在一起extend - 该事件被冒泡了一些父元素。
- 如果您使用的是
django模板，则您错误地将 a 放在了blockanother 中。
So, you should either find them out and remove the duplicate import. It is the best thing to do.
因此，您应该找出它们并删除重复的导入。这是最好的做法。
Another solution is to remove all clickevent listeners first in the script like:
另一种解决方案是click首先在脚本中删除所有事件侦听器，例如：
$("#myId").off().on("click", function(event) {
event.stopPropagation();
});
You can skip event.stopPropagation();if you are sure event is not bubbled.
event.stopPropagation();如果您确定事件没有冒泡，则可以跳过。
回答by Riel Stephen Abrenio
Just like what Nick is trying to say, something from outside is triggering the event twice. To solve that you should use event.stopPropagation() to prevent the parent element from bubbling.
就像尼克想说的那样，来自外部的东西两次触发了事件。要解决该问题，您应该使用 event.stopPropagation() 来防止父元素冒泡。
$('button').click(function(event) {
event.stopPropagation();
});
I hope this helps.
我希望这有帮助。
