1

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)

Community
  • 1
  • 1
Aske B.
  • 6,419
  • 8
  • 35
  • 62

1 Answers1

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.

iambriansreed
  • 21,935
  • 6
  • 63
  • 79
  • I guess I didn't clarify, I don't know the ID of the elements, I'll edit my post – Aske B. Sep 20 '12 at 14:02
  • 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 – Aske B. Sep 20 '12 at 14:15
  • @AskeB. What *half* of the question did I miss? – iambriansreed Sep 20 '12 at 14:16
  • "*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` – Aske B. Sep 20 '12 at 14:17
  • `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. :) – iambriansreed Sep 20 '12 at 14:21
  • Yes it does. In Chrome's developer tools frame, you're able to do `console.log($(element).data('events'), "Event object");` And that prints out an object which can be [expanded/browsed realtime in their GUI](https://developers.google.com/chrome-developer-tools/docs/console). It would be more flexible to be able to do that with jQuery events as well, which is also something I wanted covered in this question. I guess my articulation skills didn't suffice this time around. Thanks for your contribution though. – Aske B. Sep 20 '12 at 14:29
  • An off-topic note: I stopped relying on `console.log` when I found out that the following two log calls printed two identical objects (and not a before and after version): `var div = $('#someBigDiv'); console.log(div, 'Div before emptying it'); $(div).empty(); console.log(div, 'Div after emptying it');`, and breakpoints seemed like a consistent choice when you want to check several things at a given time in the code and want to make sure it's what the variables and objects actually look like at the time. – Aske B. Sep 20 '12 at 14:37
  • Cool. Will have to look into it. – iambriansreed Sep 20 '12 at 14:41