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

Question

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)

iambriansreed · Accepted Answer · 2012-09-20 14:15:42Z

1

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.

edited Sep 20, 2012 at 14:15

answered Sep 20, 2012 at 14:01

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Aske B. Over a year ago

I guess I didn't clarify, I don't know the ID of the elements, I'll edit my post

Aske B. Over a year ago

While your new answer actually answers half my question, I realize jQuery's CSS selector is fine for the job, but what if you want to do it realtime (since console.log isn't) with breakpoints? I'm guessing I could temporarily store them in a variable, so I could access them through the debugger, but I'll have to try that

iambriansreed Over a year ago

@AskeB. What half of the question did I miss?

Aske B. Over a year ago

"And can you access them through e.g. the Chrome Developer Tools frame?" which was a bad articulation for asking how to find them via breakpoints (in the debug/developer tools or similar) or similar more efficient and consistent ways than using console.log

iambriansreed Over a year ago

console.log spits them out to the Developer Tools frame. Have you tried the code above with breakpoints. I personally have never used breakpoints so if that was actually in the OP I wouldn't have bothered. I hope my contribution helps answer the OP and maybe even the question in your head. :)

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related