jquery prevent duplicate function assigned

Question

If I need to assign a click function dynamically, is there a way to ensure the click function is only assigned once and not duplicated?

this.click(function(){
    alert('test');
})

Answer 1

You can unbind the click event before you bind it again, that way you will only have one event attached to it:

//assuming this is a jquery object.
this.unbind("click");
this.click(function(){
  alert("clicked once");
});

As of jQuery 1.7, click now uses .on (http://api.jquery.com/click/) so the correct code is now

//assuming this is a jquery object.
this.off("click");
this.click(function(){
  alert("clicked once");
});

This will unbind all click events (including ones created by any plugins you might be using). To make sure you only unbind your event use namespaces. (http://api.jquery.com/off/)

//assuming this is a jquery object.
this.off("click.myApp");
this.on("click.myApp", function(){
  alert("clicked once");
});

Here myApp is the namespace.

Answer 2

With jQuery .on() you can do something like that:

//removes all binding to click for the namespace "myNamespace"
$(document).off('click.myNamespace'); 

$(document).on('click.myNamespace', '.selector', function(event) {...}); 

//this will be also removed (same namespace)
$(document).on('click.myNamespace', '.anotherSelector', function(event) {...}); 

Answer 3

I would like to add to Marius's answer--

In avoiding duplicate bindings you don't want to accidentally unbind something if there is supposed to be more than one function bound to an event. This is especially important when you are working on something with multiple developers. To prevent this you can use event namespacing:

//assuming this is a jquery object.
var alertEvent = 'click.alert'
this.unbind(alertEvent).bind(alertEvent,function(){
  alert('clicked once');
});

Here 'alert' is the name of the namespace for your click event and only your functions that were bound with that namespace will be unbound.