jQuery.on('click') before jQuery.click?

Question

I have an external script, which I can't modify. This script load a <a> button, and add a jQuery .click on it... and it finish with "return false".

I need to trigger my own code on this click. When I load the page the <a> doesn't exist, so I need to use .on('click') to bind "live". But it looks like the .on('click') is loaded "after" the .click and as he use "return false", my .on('click') is not loaded.

So the question is... How can I trigger my on click on this dynamically loaded a#btn which already has a .click function returning false?

Here is the fiddle : http://jsfiddle.net/PLpqU/

And here a code example :

<div id="container"></div>

// I want this action to be executed on click, and the other too
// I can't use .click because on the "real" code, the a#btn is loaded after the page by another script
jQuery(document).on('click','a#btn',function(){
        ga('send', 'event', { eventCategory: 'xxxx', eventAction: 'yyyy' });
}) ;

// http://www.xxxxxx.com/distant-script.js
// This one is binded in a script that I cannot edit :
// Just before it load a#btn on the page, and then bind .click on it
// as he return false, the other on('click') are not executed
jQuery('#container').append('<a id="btn" />') ;
jQuery('a#btn').click(function(){
    // Some code stuff I need to be executed, but I can't manage
    return false ;
}) ;

As you can the, the objective is to trigger a Google Analytics event on a link button loaded by a distant script.

Answer 1

It seems that you are facing multiple issues, but the more important one would be knowing when the element is rendered in the DOM so that you can manipulate it's events collection.

Once the element is accessible, it's quite simple to unbind the plugin's handlers, bind yours and rebind the plugin's one knowing that the jQuery's event collection can be accessed like: $._data(domEl, 'events');

Here's an example:

var $div = $('<div>').click(function () { console.log('plugin'); return false; }),
    clickListener = jQuery._data($div[0], 'events').click[0];

//unbind all
$div.off('click');

//bind yours
$div.click(function () { console.log('yours'); });

//rebind the plugin's one
//note that I do not register the listener by honoring the same configs, 
//but you could since you can see them in the clickListener object
$div.click(clickListener.handler);

//test out everyting
$div.triggerHandler('click');

If you do not want to unbind, I believe that you can also use the DOM level 0 event model and do:

element.onclick = yourHandler;

Know, to know when the element is available is much more of an issue if the plugin renders this element asynchronously and doesn't provide a way to know when the process is complete.

If you want to support old browsers, you will have no other choice than either override the plugin's code (assuming the concerned methods are public) or poll the DOM with setInterval until the element you were looking for is part of the DOM and then you can do what we discussed above.

If you are targetting modern browsers, you can use the MutationObserver object to listen to DOM changes.