Inspecting jQuery event handlers


Posted by Andrew McCombe on Tue Aug 5, 2014

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

  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:

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.