How to make jQuery `bind` or `on` event handlers idempotent

Question

Is there a way that I can call $(selector).bind('click', handler) or $(selector).on('click', handler) multiple times such that the handler only gets attached once?

Right now, I have multiple AJAX handlers with different success callbacks, each of which re-renders a different set of elements on the page. Ideally I'd like to refactor the "reattach events" routine to a single function rather than a routine for all.

The only way I can think of to do this right now is to explicitly unbind, for example:

$(selector).off('click');
$(selector).on('click', handler);

Looking for a way to do something like that automatically.

Answer 1

A better approach is just to move the .on call to a container. If you have a container, the .on sticks around and is applied to any existing or new children matching your selector:

$(container-selector).on("click", "element-selector", function(event){
// do stuff
});

http://api.jquery.com/on/

Cheers.

Answer 2

You can namespace your event handlers, and then just make sure you unbind before binding:

$('#something').unbind("click.some-feature").bind("click.some-feature", function() { ... });

You could write your own jQuery function to do that automatically:

$.fn.schneiderBind = function(name, fn) {
  return this.unbind(name).bind(name, fn);
});

$('#something').schneiderBind("click", function() { ... });

Alternatively, you can use bubbling and delegation to bind higher in the DOM, at a point immune to dynamic updates.

Answer 3

$(document).on("click","selector", function() {  code goes here... });

This will work with dynamically added objects