Intercept all current and future links

Question

Just wondering if there is a way with jquery to intercept a link when clicked. The problem is that some of the links on my page are not loaded when the page is first loaded. I have a vague recollection of hearing that jquery has a way of intercepting all current and future links. Here is the code I have. It works on all links there were there at the start but the links that were loaded onto the page later are not getting intercepted by this function

$('a').trackClick({
        areaClick: function(element) { return getAreaClicked(element); },
        href: function(element) { return getHrefFromElement(element); },
        text: function(element) { return getTextFromElement(element); },
        exceptions: function(element) { return isException(element); }
    });

Answer 1

[edit: I get the occasional upvote on this answer, so I wanted to update it with more current (as of May 2015) practice]:

Per my original answer, delegating the listener is a better practice. The current "best practice" syntax for jQuery is .on(). It differs only in the order, and to me is more semantically intuitive:

$('#parent').on('click', 'a', function(event) {
  event.preventDefault();
  // do the rest of your stuff
}

The rest of my original answer still applies.

---

If you don't want the default click behaviour, you also need to stop the event bubbling. I prefer delegate over live, so here's my suggestion:

$('#parent').delegate('a', 'click', function(event) {
  event.preventDefault();
  // do the rest of your stuff
});

The "#parent" is just a sample. You would use any appropriate selector that's going to be a permanent ancestor of your anchor tags. Could even go up as high as "body", but often a wrapper ID of some description works as well.

[edit: I've seen an upvote recently which means this answer is being seen by someone out there. It should be noted that .live() is now deprecated, and although .delegate() is supported, the officially suggested syntax is .on() used as a delegator:

$('#parent').on('click', 'a', function(event) {
  event.preventDefault();
  // do the rest of your stuff
});

Answer 2

You need jquery Live see here : http://api.jquery.com/live/

    $('a').live('click', function(e){

var element  = $(this);
var data = {areaClick: function(element) { return getAreaClicked(element); },
            href: function(element) { return getHrefFromElement(element); },
            text: function(element) { return getTextFromElement(element); },
            exceptions: function(element) { return isException(element); }
}
    trackClick(data);

    });

Answer 3

Use jQuery's live event handler:

$('a').live('click', function() {
    ...
});

Answer 4

The simplest option is to use jQuery's live() method, although that is fairly expensive. If possible, delegate() is a better option, and there are a couple posts here that describe the difference between the two:

Jquery live() vs delegate()
jQuery: live() vs delegate()

Generally the best option is to simply bind whatever you need to to the new <a> elements that are loaded via AJAX. For example:

$.ajax({
   url: 'http://example.com'
   type: 'GET'
   data: 'whatever'
   success: function(data){
      //after inserting the response somewhere...
      $('.insertedContent').find('a'.trackClick({
        areaClick: function(element) { return getAreaClicked(element); },
        href: function(element) { return getHrefFromElement(element); },
        text: function(element) { return getTextFromElement(element); },
        exceptions: function(element) { return isException(element); }
      });
   }
}

Answer 5

As has been said, the answers recommending .live() and .delegate() are out of date.

I had a similar problem: I had various click handlers in play already on various elements, but I wanted to add an additional click handler to catch everything and to possibly take action before the others.

My use-case for this was wanting various tools in a web-app to "reset" to default state when other tools were clicked.

Here is my solution...

$(document).on("click", function(e){
    // This catches all clicks.
    // It can be suppressed if the target uses e.stopPropagation()
});

// To start the bubbling from an element "higher" than the document,
// then use delegation, e.g.:
// $(document).on("click", ".your_class", function(e){ etc })
// This can be really useful if you only have one sensitive area in the layout,
// or you want different "master" click behaviours for different areas!

$("#my_element").on("click", function(e){
    // prevent the default action, e.g. prevent "#" navigation on <a href="#">
    e.preventDefault();
    // prevent the click bubbling to the $(document) handler
    e.stopPropagation();
    // now do my stuff
    // ...
});

$("#my_other_element").on("click", function(e){
    // prevent the default action, e.g. prevent "#" navigation on <a href="#">
    e.preventDefault();
    // this time I want the "catch all" to fire
    // so I don't do stopPropagation()
    // now do my stuff
    // ...
});