CODEWITHSUNDEEP
javascriptclickjquery
Aske B.
Aske B.

Reputation: 6609

How to lookup/debug a list of all jQuery events bindings if you don't know the id or class of the elements

I added jQuery click events dynamically using the click()-function:

$("#elementId").click(function() {
    debugger;
    //Some code
});

I realize that you can find the events by using the data attribute:

$('#elementId').data("events");

But what if you want to find them, if any, dynamically? E.g.

<div id="containerWithComplexStructure">
    //Some elements with .click events may be in here
</div>

How do you then find them if you don't know their id or class?

And can you access them through the Chrome Developer Tools frame (or similar tools), being able to browse their variables etc.?

Similar to this (click the image to enlarge):

Chrome Developer Tools view, stopped at a breakpoint http://imageshack.us/a/img138/1209/findclickfunction.png

For a single known element see: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

Upvotes: 1

Views: 1705

Answers (1)

iambriansreed
iambriansreed

Reputation: 22241

Easy, console.log( jQuery('#elementId').data('events') ); in your code;

or just jQuery('#elementId').data('events'); in the console.

To view events from all elements:

var elements_with_events = 0;
$('*').each(function(i,e){

    if($(e).data('events')){
        console.log( $(e) );
        console.log( $(e).data('events') );
        elements_with_events++;
    }

});
console.log( elements_with_events + ' elements have events.' );

... and wait for the crash. Actually this works surprisingly fast.

You could add a class when attaching events also. Then you aren't searching for events per say but classes.

Upvotes: 1

Related Questions