Debugging event handlers added to an element via jQuery

Question

I am trying to debug some complex code in which some UI gets created in an iPhone phonegap application.

The problem is that it would seem that when I press the element the event handlers (that are supposedly) attached to its touchstart event don't fire.

Its either that for some reasons those events are not really attached, or the click gets blocked before reaching them somehow...

I am trying to debug this situation and was wondering:

Given a jQuery object, is the a way to list the event handlers attached to it (via jQuery) for debugging purposes?
Is there an easy way to override .on and have it console.log its parameters
any other ideas on how I should approach such a problem

UPDATE: After validating that indeed the element has the touchstart handler and it is not being called I have discovered that if I am adding click or mousedown event handlers they do get called.

I suspect this is caused partly by jQuery mobile but I am not sure how or why and why it effects only part of my controls (those are not JQM controls...).

You can get all the event handlers using `$("#id").data("events");` — Thomas, Jul 23 '12 at 07:02
@thomas, this was a very good pointer. It allowed me to validate that an event handler for the `touchstart` event is indeed attached to my element. however still, it does not get called when I press the element on the screen of the device. any ideas on where I should go to now ? — epeleg, Jul 23 '12 at 07:27
@thomas, do you know if this can be expressed as a selector ? i.e. select elements that have events ? — epeleg, Jul 23 '12 at 07:45
Didn't know it but after a 10 second search: http://stackoverflow.com/questions/2891452/jquery-data-selector — Thomas, Jul 23 '12 at 11:20

score 0 · Answer 1 · answered Jul 23 '12 at 07:19

0

This Chrome extension lists attached JQuery Events.

answered Jul 23 '12 at 07:19

Nirmal Patel

5,128
8
41
52

this might be helpful in other scenarios. however it does not help me As my debugging is done via the phonegap remote debug console (winere). – epeleg Jul 23 '12 at 07:33

score 0 · Answer 2 · edited May 23 '17 at 12:13

How do you log all events fired by an element in jQuery?

function getEventsList($obj) {
    var ev = new Array(),
        $events = $obj.data('events');
    for(var i in $events) {
        ev.push(i);
    }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

I used this to find out what exact custom event was bound to an element by a jquery plugin. It gets all the attached events and calls a console.log for the event when it is fired.

Debugging event handlers added to an element via jQuery

2 Answers2