jQuery - Can I trigger an event within it's ow

Question

So I basically have a .click event, that does e.preventDefault(). However, once the code finishes executing, I want it to re-execute the event after unbinding it.

The context for all of this is, I'm trying to set up outbound link event tracking with google analytics (analytics.js).

<a href="http://www.example.com/" id="link1"><img /></a>    
<script>        
    $("#link1").click(function(e) {
        e.preventDefault();

        ga('send', 'event', 
            'category', 
            'action', 
            'label', 
            { 
                'hitCallback': function() {                                         
                    $(this).unbind(e).trigger("click");
                } 
            }
        );
    });
</script>

This setup is necessary, otherwise the page terminates before the event can be sent. Also, I would like to make the snippet as independent as possible, since this script will be copy-pasted to a lot of places.

I wish there was something like e.sleepDefault(); and e.wakeDefault();

Answer 1

Ok, after a lot of research, I realized that my problem was specifically with the fact that jQuery will not allow you to follow links without actually physically clicking them, hence you can't really re-curse a call to click and hope that it follows the link. When you do that, it acts as a "simulated" click, so it won't actually follow the href, but it will execute everything else you have in the handlers.

The solution, was to use javascript's native click(), which doesn't care and will follow the link.

So this is what my code looked like:

<a href="http://www.example.com/" id="link1"></a>    
<script>        
    $("#link1").click(function(e) {
        var obj = $(this);
        e.preventDefault();

        ga('send', 'event', 
            'category', 
            'action', 
            'label', 
            { 
                'hitCallback': function() {                                         
                    obj.off(e);
                    obj[0].click();
                } 
            }
        );
    });
</script>

So here is the breakdown:

1. The handler is executed on a physical click with preventDefault() enabled.
2. It sends the event to Google.
3. Google responds, and the callback function is executed.
4. The click handler is disabled to restore default behavior.
5. The click is simulated again to execute the default handler.

The key is the [0] that converts the jQuery Object to an htmlDomObject which allows you to use the native javascript click() instead of the jQuery click() which, like I said, DOES NOT FOLLOW LINKS.

Answer 2

Try this:

 $("#link1").click(function(e) {
    e.preventDefault();
    var url = $(this).prop('href');
    ga('send', 'event', 
        'category', 
        'action', 
        'label', 
        { 
            'hitCallback': function() {                                         
                window.location = url;
            } 
        }
    );
 });