How do I view what objects are associated with a DOM element

Question

as a quick overview, I'm trying to apply fancybox to elements pulled in via ajax.

I currently use this code to apply jQuery UI's calendar widget to apply it to new content.

$('.date').live('focusin', function() {
            var $this = $(this);
            if(!$this.is(':data(datepicker)')) {
                //this will attach a datepicker control & datepicker will immediately fire
                $this.datepicker();
            }
        });

I understand what this is doing, upon mouseover it checks to see if the datepicker object is applied to the element, if not apply it and then trigger it.

What I am unsure of is while it appears jQuery UI's datepicker uses the identifier "datepicker" I am unsure what fancybox would use.

I'm pretty sure I remember there being a way to view what objects are applied to what dom elements in firebug, but I can't seem to find it.

Does anyone know how to find the identifier?

Answer 1

You could use the Firefox/Firebug Add-on called FireQuery.

It is showing any JavaScript objects which are bound to DOM elements within the HTML Panel of Firebug.

I have no idea whether there is something similar available for the Chrome Dev Tools.

Update: I switched to Chrome as main developing browser and there is an extension called jQuery Debugger which does an awesome job with showing jQuery data and events.