Search code examples
jqueryfunctiondynamicclick

jquery prevent duplicate function assigned


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');
})

Solution

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