Javascript: Finding jQuery bound functions (bind)

posted by sacah on javascript, programming, sacah,

When using jQuery to bind events, such as click, mouseup, mousedown etc jQuery stores them in an object, using Firebug plugins that detect bound functions will usually just tell you a function is bound, but using Firebugs console you can find each function and it’s actual code.

jQuery('#id-of-object').data('events')

This will show you an object which contains all bound events, such as click, mouseover etc, that are currently bound to #id-of-obj.

Object { click=}
jQuery('#id-of-object').data('events').click

Displays an array of each function bound to the click event of #id-of-obj. There is only one function bound to this object.

[Object { type="click", guid=2}]

If you click on the object in the Firebug console you’ll see it has a few properties, ‘data’, ‘guid’, ‘namespace’, ‘type’ and ‘handler’. The one we’re interested in is ‘handler’.

jQuery('#id-of-object').data('events').click[0].handler.toString()

This will output the code of the function bound to the object. If there are more than one function bound to the click event of the object you can find each one by incrementing the array number.

jQuery('#id-of-object').data('events').click[1].handler.toString()

This will get the second function bound to the #id-of-object object.

So hopefully this will help anyone trying to debug a site using jQuery and bound functions, let me know if you have any further questions.