jQuery namespaced event binding/unbinding
// from a comment by Steven Bristol on errtheblog.com
I just wanted to share a really killer event handling tidbit:
Generally you do something like:
Everyone knows this can be rewritten as:
But sometimes you need to unbind something:
The problem with this is that it will unbind all the click events, not just yours. So if multiple bits of javascript have a click event handler for ’.class’, unbinding removes them all. (This is because there is no way to identify an anonymous function.)
But jQuery is so good that there is a way to handle this: Namespacing your events:
or for reinitializing an element added via ajax:
I just wanted to share a really killer event handling tidbit:
Generally you do something like:
jQuery(’.class’).click(function(){//whatever});
Everyone knows this can be rewritten as:
jQuery(’.class’).bind(‘click’, function(){//whatever});
But sometimes you need to unbind something:
jQuery(’.class’).unbind(‘click’, function(){//});
The problem with this is that it will unbind all the click events, not just yours. So if multiple bits of javascript have a click event handler for ’.class’, unbinding removes them all. (This is because there is no way to identify an anonymous function.)
But jQuery is so good that there is a way to handle this: Namespacing your events:
jQuery(’.class’).bind(‘click.namespace’, function(){//}); jQuery(’.class’).unbind(‘click.namespace’);
or for reinitializing an element added via ajax:
jQuery(’.class’)unbind(‘click.namespace’).bind(‘click.namespace’, function(){//});