With jQuery, How Do I Intercept Hyperlink Click Events Temporarily?

Question

This question refers to affiliate marketing, but really is a generic question about intercepting hyperlinks before they go off to another site, where you can log visitor activity to a database.

My affiliate marketing client had a really good question. Imagine a scenario where you have products pulled back from Amazon over its API, given a seed keyword. Now imagine a visitor clicks one of those products to view it on Amazon. The URL for that product might look like this (and this is just a demo):

http://www.amazon.com/dp/B0042RU3Y0/?tag=xxxxxxxxxxxxxxxx-20

But guess what's wrong with that? It's not passing that seed keyword. So, we have no idea which seed keywords were the most effective. Instead, she was wishing we could pass the following and then track that somehow:

http://www.amazon.com/dp/B0042RU3Y0/?tag=xxxxxxxxxxxxxxxx-20&seed=laptops

I didn't see any docs on Amazon where we could pass extra params and then track them in the reports by a filter.

So, the only thing I could think of is that we need to capture the click before it goes off to Amazon. In other words, before that event bubbles up and is executed, somehow in jQuery I can intercept it first, parse the href URL for that hyperlink, tack on this extra seed keyword information, send it over AJAX back to a PHP page and a database table, and then release that click event so that it is executed and the browser goes off to Amazon.

Does anyone know how this is done in jQuery? I know the AJAX part -- just not the click intercept part that grabs the click, then releases it.

Passifloraceous

Answer 1

var seed = "&seed=laptops";
$("a").live('click',function(){
    $(this).attr('href', $(this).attr('href')+seed);
});

Cobble

Answer 2

You can bind a click event to all the anchor tags, like

$("a").click(function(){
    // write your code
});

If you want to do the default action then put a return true; at the end of this function.

Anett

Bingo! This is exactly what I needed. I had no idea this was possible -- thank you very much! :) I tested with IE7+, Opera (latest), Chrome (latest), FF (latest), and Safari/Windows (latest) and it works. The only extra thing I added was a "var u = $(this).attr('href');" so that I know which URL was clicked. – Passifloraceous

Excellent and concise answer. As an update, in later versions of jQuery, a more appropriate way would be to call $("a").on('click',function(){... – Pitchblende

Answer 3

Tho this might work in some circumstances, $("a").click() isn't best approach and isn't intercepting clicks, it hooks a event listener on a array of elements.

Not only it implies scanning all links in page at load time, but any ajax/dynamic content updated in the document since load time won't get intercepted. That's because we aren't intercepting clicks, but hooking an event listener on all links at the time the call was executed (typically at onDocumentReady - note that any click happening before that aren't intercepted).

A more consistant approach is to intercept any clicks in the document and filter the ones we want to change.

This 'filter' is documented as selector jQuery.on( events [, selector ] [, data ], handler )

This way we don't need to wait for documentReady to add the event listener.

$(document).on('click', 'a', function(e) {
  $(e.target).attr('href', $(e.target).attr('href')+seed);
});

// or, as we don't need `this` anymore

$(document).on('click', 'a', (e) => {
  $(e.target).attr('href', $(e.target).attr('href')+seed);
});

Nystatin