How to find where jquery event handlers are assigned?

Question

For some reason I have an additional change handler on a number input. I can't for the life of me figure out where it is coming from. Can anyone point me in the direction of how I can track down this rouge event handler assignment? In chrome dev tools if I inspect the element and look at the event handlers area it just points to (1) jquery and (2) undefined.

I'm using a standard $("#id").bind("change", handler) call. But even if I comment out the handler I'm trying to use, the above handler is still present. I even tried putting in a call to unbind. No dice. I just wasn't sure if there was a way to track through the call stack or something that would lead me to where the assignment is being added. — devlife, Sep 10 '12 at 21:51
undefined usually means that it's inline javascript, not an external file. — valentinas, Sep 10 '12 at 21:52
maybe this will help you : http://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object — Taha Paksu, Sep 10 '12 at 22:02

score 1 · Answer 1 · answered Sep 10 '12 at 21:58

If the other handler is undesired, you can always use unbind :

$("#id").unbind('change').bind("change", handler);

Of course, you'll have to take into consideratin every possible case, so a complete solutin would be :

$("#id")
    .off('change')
    .die('change')
    .unbind('change')
    .on("change", handler);

abuduba · Answer 2 · 2012-09-10T22:13:42.807

All of events binded by jquery are in $( target ).data( 'events' ); That represents object with keys as name of event contains array of functions.

For example try this in console on stackoverflow directly: $('a').data('events').click[0].handler;

To list each of event type calbacks assigned by jquery object try:

$.each( $( youSelector ).data('events'), function(v,k){
   console.log( v +":");
   $(this).each( function(){
     console.log( this.handler );
   });
   console.log("------------------");
});

Way to find out from which file they came is search from piece of handler code in console on search input in resources tab :)

score 0 · Answer 3 · answered Sep 10 '12 at 22:27

These answers weren't quite what I was looking for but I was able to find out where the handlers were coming from. I'm using webshims and a jquery tool called overlay. Apparently the overlay executes the code in the script tag when the page is rendered and again when the overlay is actually applied.

How to find where jquery event handlers are assigned?

3 Answers3