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

Question

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.

As I see the .on() has four arguments. The event(s), selectors in order to reduce the total matched elements, data, and the handler function. My your code require the third argument to be null and the fourth to be the function ? Here is what I found : http://api.jquery.com/on/ — KodeFor.Me, Dec 14 '11 at 10:15
@MerianosNikos - the third param is optional, as indicated by the page you linked to. — nnnnnn, Dec 14 '11 at 10:37

Matt · Accepted Answer · 2011-12-14T11:05:43.263

5

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/

edited Dec 14 '11 at 11:05

answered Dec 14 '11 at 10:21

Matt

74,352
26
153
180

awesome, do you know if this is normal though? `bind called with 2 arguments` `["click.delegateEventsview8", function () { [native code] }]` – fancy Dec 14 '11 at 10:30
If you're outputting the contents of the `arguments` variable, then yes. Although I can't see why you'll be passing a native function as the second parameter to `bind()`? Maybe you can update your question with the actual call to bind you're trying to record, and it'll make more sense :). – Matt Dec 14 '11 at 10:33
I think those are coming from backbone.js event bindings. – fancy Dec 14 '11 at 10:37
Matt you seem very knowledgeable, do you mind taking a look at this issue I'm trying to solve? http://stackoverflow.com/questions/8501848/how-can-i-trouble-shoot-click-events-being-triggered-twice/8502547#8502547 – fancy Dec 14 '11 at 10:40
@fancy: Sorry, I haven't had much experience with backbone/ jQuery mobile :(. – Matt Dec 14 '11 at 10:49
Does `.on()` go through `.bind()` as well? – nnnnnn Dec 14 '11 at 10:56
@nnnnnn: Since `on()` was introduced in jQuery 1.7, [everything](https://github.com/jquery/jquery/blob/255460e4836e86b86f48dd5b7d2a2cbf3f996de2/src/event.js#L951-L953) [goes through](https://github.com/jquery/jquery/blob/255460e4836e86b86f48dd5b7d2a2cbf3f996de2/src/event.js#L1017-L1044) [that](https://github.com/jquery/jquery/blob/255460e4836e86b86f48dd5b7d2a2cbf3f996de2/src/event.js#L864-L916). – Matt Dec 14 '11 at 10:57
Cool. That's what I was suggesting, but I was too lazy to look it up and provide a reference... – nnnnnn Dec 14 '11 at 12:01

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

1 Answers1