Question

How could I create a function that would console.log details every time jQuery binds to a click event?

Like logging when this happens.

$('.classy').on('click', 'button', function(){
    console.log('clicked');
})

I’m trying to trouble shoot why these events are firing twice.

Answer 1

The way to do this is to overwrite the existing on() method with a new function. The new function does the logging, and then calls the old on() implementation.

(function () {

    // Store a reference to the existing bind method
    var _on = jQuery.fn.on;

    // Define a new implementation
    jQuery.fn.on = function () {
        // Do your logging, etc.
        console.log("on called with " + arguments.length + " arguments");

        // Don't forget to do the actual bind!
        return _on.apply(this, arguments);
    };

}());

Bear in mind that all the other event methods (bind(), live(), delegate() and the shortcut methods (hover(), click() etc) all call on() behind the scenes, so calls to this will fire log events as well.

You can see this working here; http://jsfiddle.net/fJ38n/