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

Question

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

Answer 1

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

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

Answer 2

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!

Answer 3

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.

Answer 4

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.

Answer 5

This will work well. It work for me.

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

Answer 6

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();"