The ease with which we can bind events to DOM elements using jQuery is a huge part of what makes jQuery so awesome. But, as with many things that are wired-up programmatically, when something doesn't work, it can be hard to figure out where it went wrong. One cool tip that I picked up reading Cody Lindley's jQuery Enlightenment book is that jQuery-bound events are actually stored in the data() method using the "events" key. This means that if we need to, we can use FireBug at runtime to inspect the events that are bound to a given DOM element.
The one caveat here (and maybe this is just my ignorance to the way in which FireBug works) is that we can't just inspect the DOM element to view the bound events. This is because the data() method doesn't actually store the data with the given DOM element; rather, it stores the data internally to jQuery using a unique ID that it attaches to the given DOM element. As such, to view the bound events, we'll actually need to call the data( "events" ) method on the given DOM element from the FireBug console command line.
But, it gets even more complicated than that - we need a way to reference the given DOM element in a unique way so that we can access it using a jQuery selector. In order to accomplish this, I created a script that uses advanced jQuery filtering to find all the DOM elements that have bound events and add a unique class name to them. This way, I can use the unique class name to access the DOM element from the FireBug console command line.
As you can see above, once the "reveal" link is pressed, all event-having DOM elements are located and assigned a unique class name in the form of "evtX". This class name can then be leveraged to output the bound events:
$( ".evtX" ).data( "events" );
Of course, you could also just edit the HTML using FireBug, added a custom class name, and do the same thing. Either way, it's cool that this is possible.
Want to use code from this post? Check out the license.