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

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 开发者_StackOverflow中文版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?

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:

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

But without seeing some code I'm just guessing.

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

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

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

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

$("#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!

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.

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:

$('#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:

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

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

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.

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!

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.

You can use one():

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

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

This will work well. It work for me.

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

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

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

Documentation for "off();"

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.