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.

you can't. an event bound directly to the element will always happen before a delegated event. You will have to either extend the plugin, or remove the click event after it has been added. — user400654
– user400654, Commented Feb 28, 2014 at 21:30
Yes but i need it to be executed too, i can't just unbind without "rebinding" it. Is there a way to rebind it after unbinding ? assuming i'm not responsible of the bind and his code can change — Pierre Granger
– Pierre Granger, Commented Feb 28, 2014 at 21:35
I understand that, but the fact is there is no simple workaround to this. You will have to unbind or modify the event that the plugin is issuing. — user400654
– user400654, Commented Feb 28, 2014 at 21:57
Looking back over your fiddle, it looks like you're binding your click event to the document, not to the a#btn element. Click events propagate from the bottom of the DOM to the top, so events bound to the document will always fire after events bound to DOM elements. Can you bind directly to a#btn? — ckersch
– ckersch, Commented Feb 28, 2014 at 22:40
No i can't cause i need it to be dynamically binded as the button is not in DOM on load — Pierre Granger
– Pierre Granger, Commented Feb 28, 2014 at 23:11

plalx · Accepted Answer · 2014-02-28 22:16:56Z

5

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.

edited Feb 28, 2014 at 22:16

answered Feb 28, 2014 at 21:53

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

user400654 Over a year ago

No because load events generally don't reach the document.

plalx Over a year ago

@PierreGranger Well setInterval is certainly less efficient, but it's quite simple. You can do something like

var timer = setInterval(function () { var $el = $('#el'); if ($el.length) { /*do what you need with the element*/  clearInterval(timer); } }, 100);

plalx Over a year ago

Also please note that you can use DOM 0 events instead of binding and unbinding, I modified my answer accordingly.

Pierre Granger Over a year ago

I tried your method and it works perfectly ! pretty awesome :) Thank you for your time on my problem this is really perfect :)

plalx Over a year ago

@PierreGranger Tu veux dire que ton handler n'était pas toujours invoqué quand l'élément était cliqué?

|

AbhinavRanjan · Accepted Answer · 2014-02-28 21:48:18Z

3

You can unbind an event and then add your function as the event handler. http://api.jquery.com/unbind/

Check this jsfiddle http://jsfiddle.net/Xm5MB/

$(function(){

    $("#testDiv").append("<a id='btn'>link</a>");
    $("a#btn").click(function(){
        alert("first bind");
    });
    $("a#btn").unbind("click");
    $("a#btn").on("click", function(){
        alert("second bind");
    });
});

edited Feb 28, 2014 at 21:48

answered Feb 28, 2014 at 21:32

AbhinavRanjan

1,65617 silver badges21 bronze badges

7 Comments

Pierre Granger Over a year ago

Unbind is okay, but i need to rebind it after... is there a way ?

AbhinavRanjan Over a year ago

You said that your link is created dynamically. Can you give more details about that? If you are creating the link then after adding it to the DOM, you can unbind the 'click' event and bind your handler.

MamaWalter Over a year ago

+1, an alternative to unbind is .off(). "As of jQuery 1.7, the .on() and .off() methods are preferred to attach and remove event handlers on elements."

Pierre Granger Over a year ago

I've edited the fiddle to be more precise on the code : jsfiddle.net/XvyBN The problem with your code is that i need the first bind to be triggered, i can't just unbind it i want it to be executed too

plalx Over a year ago

@AbhinavRanjan How will you unbind an event from a DOM element when you do not know when that DOM element will exist and secondly, it's quite important to rebind the plugin's event so that it can perform it's own behaviour.

|

ckersch · Accepted Answer · 2014-02-28 21:36:01Z

2

One thing that might work is to bind the click event that you want to fire first to a child of the element that the other click event is bound to. Since the click event will bubble up from the lowest level of the DOM to the highest, it should fire any handlers bound to children before the ones bound to their parents.

If you want to stop the other event from firing, you can either manually use event.stopPropagation() or else return false from the function you have bound to the child, which calls both event.stopPropagation() and event.preventDefault().

answered Feb 28, 2014 at 21:36

ckersch

7,7472 gold badges41 silver badges48 bronze badges

Comments

Pierre Granger · Accepted Answer · 2014-03-01 00:10:13Z

Here is a solution provided by @plalx :

var os = jQuery('#container') ; // the #container is written by me on the code. He's empty on load and is filled by the distant script wich add the a#btn on it.
if ( os.length > 0 ) // I just check if he is on my page, just in case.
{
    var timer = setInterval(function () 
    {
        var btn_os = jQuery('a#btn') ;
        if (btn_os.length) // Button is loaded on page : we can do the trick
        {
            clickListener = jQuery._data(btn_os[0], 'events').click[0]; // caching the first .click bind

            btn_os.off('click'); // Removing all binds

            // Adding my own bind
            btn_os.click(function () {
                console.log('test') ;
                ga('send', 'event', { eventCategory: 'xxxx', eventAction: 'yyyy', eventLabel : 'zzzz' });
                // You can either trigger here the previous handler or rebind it out of here, 6 lines bottom
                // In my case i prefer to trigger it myself, with a little delay to make sure that my ga('send') has time to register
                setTimeout(function(){clickListener.handler() ;}, 150);
            });

            // And rebinding the old one if needed
            // In my particular case i don't want to rebind it, i prefer triggering it manually on my .click function with a setTimeout delay
            // btn_os.click(clickListener.handler);
            clearInterval(timer) ; // Removing the interval timer
        }
    }
    , 100);
}

Collectives™ on Stack Overflow

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

4 Answers 4

11 Comments

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related