Inspecting jQuery event handlers

August 5th, 2014

Warning: This post is 10 years old. Some of this information may be out of date.

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");

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.