Inspecting jQuery event handlers

August 5, 2014

Image for Inspecting jQuery event handlers from unsplash.com

Ever had issues finding where a JQuery click handler is defined? Got a project with LOTS of Javascript and can't find where an event is handled? Here's how to find out using Google Chrome. 1. Inspect your element. 2. Go to console and enter

'$($0).data('events');' ($0 is the current selected element)
  1. Expand the object, right click on the handler: 'function()'
  2. Select 'Show Function Definition'. This will open the Javascript file at the definition in Google Chrome's sources tab.

UPDATE!

The above doesn't wok with JQuery 1.7+. You need to use this instead:

$._data($('#element').get(0), "events");
Inspecting jQuery event handlers

Now, if you right click on 'handler: function (event {' and select 'Show function definition' you can then see the code that defined the handler.

I hope this helps someone else out.