我怎样才能创建一个每次jQuery绑定到click事件时都会调用console.log细节的函数？

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/