jQuery：单击一次按钮，单击事件触发两次或更多次

jQuery: Single button click, click event firing two or more times

提问by gholmes

I have HTML input and button elements. I use the buttons to submit forms, open secondary windows, etc. The problem is, a single click is turning into 2 (and sometimes many more) form submissions, or opening two additional browser windows. I've reproduced the problem in multiple web browsers. I've tried switching jQuery versions and that didn't change anything. What could be causing this sort of thing to happen?

我有 HTML 输入和按钮元素。我使用按钮来提交表单、打开辅助窗口等。问题是，一次单击变成了 2 个（有时更多）表单提交，或者打开两个额外的浏览器窗口。我已经在多个网络浏览器中重现了这个问题。我试过切换 jQuery 版本，但没有任何改变。什么可能导致这种事情发生？

回答by Darko Z

Your problem may be happening because you are assigning the same handler to the click event multiple times. I suggest you check that the line where you assign the handler is not being called multiple times inadvertently. Another solution could be a call to unbind(deprecated 3.0) or off(superseeded) first:

您的问题可能正在发生，因为您多次将相同的处理程序分配给 click 事件。我建议您检查分配处理程序的行是否没有被无意中多次调用。另一种解决方案可能是首先调用unbind(deprecated 3.0) 或off(superseed)：

$("#myButton").unbind("click").click(myHandler); // deprecated
$("#myButton").off("click").click(myHandler); // superseeded

But without seeing some code I'm just guessing.

但是没有看到一些代码，我只是在猜测。

回答by Jarrett Widman

Given that you have not supplied a lot of information, the best I can recommend is looking at one()

鉴于你没有提供很多信息，我能推荐的最好的方法是查看 one()

http://api.jquery.com/one/

http://api.jquery.com/one/

回答by balupton

jQuery Sparkle provides a clean elegant solution for this, by calling the function "once" you can bind a handler to an event only once.

jQuery Sparkle 为此提供了一个简洁优雅的解决方案，通过“一次”调用函数，您可以将处理程序仅绑定到一个事件一次。

It is an important improvement over Darko Z's suggestion as using:

这是对 Darko Z 建议的重要改进，因为使用了：

$("#myButton").unbind("click").click(myHandler);

Would unbind any other "click" handlers associated to the "click" event each time it is called. So you sure do ensure it is only binded once, however you unbind everything else accidentally! Ooops!

将在每次调用“click”事件时解除与“click”事件关联的任何其他“click”处理程序的绑定。所以你一定要确保它只绑定一次，但是你不小心解除了所有其他的绑定！哎呀！

jarrett's suggestion unbinds the "click" handler right after it is called, so if you would to have the handler called again (after it's initial fire) you would have to rebind the handler.

jarrett 的建议在“click”处理程序被调用后立即解除绑定，因此如果您希望再次调用处理程序（在初始触发之后），您将必须重新绑定处理程序。

Using jQuery Sparkle's once will allow the handler to fire as many times as it needs, but to only be binded once instead of multiple times. You can use it like this:

使用 jQuery Sparkle 的 once 将允许处理程序根据需要触发多次，但只能绑定一次而不是多次。你可以这样使用它：

$('#myButton').once('click', function(){
    // my handler
});

Or if you would like to support data in your callback just like jQuery's built in "bind", then you can use:

或者，如果您想在回调中支持数据，就像 jQuery 内置的“绑定”一样，那么您可以使用：

$('#myButton').once('click', data, function(){
    // my handler
});

You can find the source code for defining the once function here.

您可以在此处找到定义 once 函数的源代码。

It's open source under the AGPL licence, so you can feel free to grab what you need out of it worry free! :-) It's also actively developed on a day to day basis so you will never be short on support.

它在 AGPL 许可下是开源的，因此您可以放心地从中获取所需的东西！:-) 它还每天都在积极开发，因此您永远不会缺少支持。

But most importantly it is a DRY Plugin/Effect Framework to allow you to develop plugins and extensions much more easily. So hope this helps to achieve that goal!

但最重要的是，它是一个 DRY 插件/效果框架，可让您更轻松地开发插件和扩展。所以希望这有助于实现这一目标！

回答by Walf

for me it was caused by

对我来说这是由

$(function() {
    $('.some-element').click(function() {
        //event that fires twice
    });

    //some exception-throwing code here
});

jQuery was calling the anonymous ready function twice(?!) because of the exception so the click function would be bound twice.

由于异常，jQuery 两次调用匿名就绪函数（？！），因此单击函数将被绑定两次。

回答by gkiko

You can use one():

您可以使用one()：

$("div").one("click", function(e) { ... });

Attach a handler to an event for the elements. The handler is executed at most once per element.

将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

回答by Riyadh Ul Islam

This will work well. It work for me.

这将运作良好。它对我有用。

$(".class-name").unbind().click(function() {
    //Do the Stuff
});

回答by MsTapp

I had a problem with modal dialog windows. The event fired once for each time I had opened a dialog in the session. No problem on the first window, fired twice on the second window, fired three times on the third window, etc.

我遇到了模态对话框窗口的问题。每次我在会话中打开一个对话框时，该事件都会触发一次。第一个窗口没问题，在第二个窗口上发射了两次，在第三个窗口上发射了三次，依此类推。

I found that the initialization function for the dialog was being called each time I opened a new dialog window in the same session. I added a global variable notInit = -1 and assigned the value to 1 when running init. I checked the value of notInit before running the init function and only proceeded with init if the value was -1.

我发现每次在同一个会话中打开一个新的对话框窗口时，都会调用对话框的初始化函数。我添加了一个全局变量 notInit = -1 并在运行 init 时将值赋值为 1。我在运行 init 函数之前检查了 notInit 的值，只有在值为 -1 时才继续执行 init。

回答by Tessa

Calling something like this before it worked for me since I had originally used $('#myButton').on('click'... to assign my listeners.

因为我最初使用 $('#myButton').on('click'... 来分配我的听众，所以在它对我有用之前调用了这样的东西。

$('#myButton').off();

Documentation for "off();"

“off();”的文档