jQuery 触发两次，事件冒泡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4307472/
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 firing twice, event bubbling?
提问by Ben
I have looked at all of the issues people are having with event bubbling and jQuery firing twice, but I can't figure out this issue. I am only clicking in one DIV at a time, but the click handler is firing twice.
我已经查看了人们在事件冒泡和 jQuery 两次触发方面遇到的所有问题，但我无法弄清楚这个问题。我一次只点击一个 DIV，但点击处理程序触发了两次。
HTML
HTML
<div class="scroll-content-item" data-pid="1773">
<img src="somefile" class="mixdock-img" data-pid="1773"/>
</div>
<div class="scroll-content-item" data-pid="1777">
<img src="someotherfile" class="mixdock-img" data-pid="1777"/>
</div>
jQuery...
jQuery...
jQuery(document).ready(function($) {
var count = 0;
// On click, hide the currently displayed post and show the one clicked
$('.scroll-content-item').click(function () {
count += 1;
alert("count = "+count);
event.stopPropagation();
});
});
What this does is show two alerts per click, each with the same count. Count does increment on each click.
这样做是每次点击显示两个警报，每个警报都有相同的计数。计数在每次点击时都会增加。
采纳答案by Richard Marskell - Drackir
You have to pass the eventvariable into your function like so:
您必须event像这样将变量传递给您的函数：
$('.scroll-content-item').click(function (event) {
回答by jyoseph
I was not able to reproduce the issue on jsbin: http://jsbin.com/ixabo4
我无法在 jsbin 上重现该问题：http://jsbin.com/ixabo4
Is it possible that you have included the jQuery script twice?
您是否可能两次包含 jQuery 脚本？
回答by Nick Craver
It sounds like overall your code is executing twice, two entire instances of your:
听起来您的代码总体上执行了两次，您的两个完整实例：
jQuery(document).ready(function($) {
//...
});
...are executing (each with their own countvariable), ensure the script isn't being included twice in the page. To confirm this is the issue, you can add an alert (which you should see twice at the moment):
...正在执行（每个都有自己的count变量），确保脚本没有被包含在页面中两次。要确认这是问题所在，您可以添加警报（此时您应该会看到两次）：
jQuery(document).ready(function($) {
alert("init");
//...
});
回答by illvm
jQuery(document).ready(function($) {
var count = 0;
// On click, hide the currently displayed post and show the one clicked
$('.scroll-content-item').click(function(e, ui) {
e.stopPropagation();
count += 1;
alert("count = " + count);
});
});
Works fine in my tests. Even with nested divs with the class "scroll-content-item". I would make sure you aren't attaching a listener to the click handler more than once.
在我的测试中工作正常。即使是带有“滚动内容项目”类的嵌套 div。我会确保您不会多次将侦听器附加到单击处理程序。
If you can't find a place where the code is being called twice add the following before you attach the listener:
如果找不到代码被调用两次的地方，请在附加侦听器之前添加以下内容：
$('.scroll-content-item').unbind('click');
回答by George SEDRA
$('.scroll-content-item').unbind('click').bind('click', function(e) {
alert("clicked");
});
