List all bindings of an element (with jQuery)

Question

Is there a way to list all bindings on a jQuery element? jQuery's bind() does only seem to attach them and I didn't find a jQuery function that does get the bindings.

Snooperscope

Answer 1

This answer applies to jQuery version < 1.8

Best way to do that, probably the FireQuery plugin for FireFox. Really a neat tool.

If you want/need to accomplish that "in-code", use jQuerys .data('events') object.

$.each($('#element').data('events'), function(i, e) {
    console.log(i, e);
});

All events that were bound via jQuery gets pushed into that object. Of course, there might also be other event handlers like on-anything, for which you would have to check explicitly.

Ref.: FireQuery

Fosque

Yes, I need to do it in code (for writing some tests). Your solution works great. Thanks a lot. – Snooperscope

See my answer below if you're using >= jQuery 1.8. – Strophic

None of the answers here worked for me. The accepted answer here worked fine though. jQuery._data( elem, "events" ); where elem is a HTML element (NOT jQuery object) – Sikh

Or use $("#elem").get(0), it returns the html element. – Principality

Answer 2

As of jQuery 1.8 the new syntax is:

$.each($._data("#element", "events"), function(i, e) {
console.log(i, e);
});

Note that it's $._data("#element" NOT $.data($("#element"), so be sure to unwrap your selector if you need to using $myJQuerySelector[0].

Read more...

Strophic

Answer 3

There must be a way to do it programatically, and someone has figured it out and put it in a visual tool.

I'm not sure if this answers your question, but I've found the best tool for determining these bindings is called Visual Event (not a great name, very hard to google actually).

This works in Firefox and Chrome, Chromium, Safari, etc. Some binding issues may happen differently in different browsers. It's good to cover all the bases.

If you have an overlay and need to get underneath an element you can double-click any binding to hide it to get to the event you need to view.

Amends

Answer 4

Based on the other answers and comments.

JQuery 1.8 and above

var elementSelector = '#element-id';

$(elementSelector).bind('click.test', function(){}); // For testing.

$.each($._data($(elementSelector)[0], 'events'), function(i, e) {
    console.log(i, e);
});

The first argument of $._data() is not jquery object.

Note that this is not a supported public interface; the actual data structures may change incompatibly from version to version. - Jquery 1.8 Realeased

---

Below JQuery 1.8

var elementSelector = '#elementid';

$(elementSelector).bind('click.test', function(){}); // For testing.

$.each($(elementSelector).data('events'), function(i, e) {
    console.log(i, e);
});

In version 1.6, jQuery separated its internal data from the user’s data to prevent name collisions. However, some people were using the internal undocumented “events” data structure so we made it possible to still retrieve that via .data(). This is removed in 1.8.- Jquery 1.8 Realeased

Runyon

If JQuery 1.8 and above, that's the correct answer! Thanks! +1 – Entomostracan

Answer 5

The following code looks at an element and all its children and console.logs any bound events.

function findMyEvents(me) {

    if (typeof $._data($(me)[0], 'events') !== "undefined") {
        console.log($(me)[0])
        console.log($._data($(me)[0], 'events'))
        $._data($(me)[0], 'events')
    };
    for (var i = 0; i < $(me).children().length; i++) {
        findMyEvents($(me).children()[i])
    }
}

findMyEvents('body')

Ambulatory

Answer 6

I cannot make Grinn's answer work. From jQuery 1.8 find event handlers, I think the example should be changed to

var obj = $('#element');
$.each($._data(obj[0], "events"), function(i, e) {
console.log(i, e);
});

Antibes