Tuesday, 29 May 2012

JQuery event debugging



Here’s a useful debugging plugin for jQuery. It will list the handler/’s of any event bound to any element:

/ UPDATED -> NOW WORKS WITH jQuery 1.3.1
$.fn.listHandlers = function(events, outputFunction) {
return this.each(function(i){
var elem = this,
dEvents = $(this).data('events');
if (!dEvents) {return;}
$.each(dEvents, function(name, handler){
if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
$.each(handler, function(i,handler){
outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );


It’s pretty simple to use, you can specify the elements (as you usually would, via a selector), the events to be listed and the output function to which the plugin will feed the data.

If you’re using firebug then it’s best to use either the console.log function or console.info.

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);   // List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);   // Write a custom output function:
$('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');

Note, this will only work if you’ve used jQuery’s native event registration methods, e.g.$(elem).click() / $(elem).bind('click').


No comments:

Post a Comment

How to by pass the Jaguary X-Type enter security pin screen after changing battery

How to bypass security code on Jaguar X-Type touchscreen Satellite Navigational units. Just hold the skip track, AMEM and PTY buttons ...