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


        

Answer 1

assuming that elements are being added to the html and you want to add an event only for elements added:

function addEvents2Elements()//prevent Duplicate
{
    //this will add the event to all elements of class="ele2addevent"
    $('.ele2addevent').not('.clickbind').on('click',function(){alert('once');})

    //this will add a class an then the class="ele2addevent clickbind"
    $('.ele2addevent').not('.clickbind').addClass('.clickbind');
    //all elements of class="... clickbind" will not be catched anymore in the first line because of .not() every time you call this function
}
addEvents2Elements();

be shure that you add only with the class="ele2addevent", because after the bind it will be class="ele2addevent clickbind" and not catched again...

Answer 2

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 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.

Answer 4

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) {...});