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

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!