How do I run a jQuery function when any link (a) on my site is clicked

Question

I have a new site build on corecommerce system which does not have much access to HTML and non to PHP. Only thing I can use is JavaScript. Their system is currently not great on page load speed so I wanted at least customers to know something is happening while they wait 5-8 seconds for a page to load. So I found some pieces of code and put them together to show an overlay loading GIF while page is loading. Currently it will run if you click anywhere on the page but I want it to run only when a link (a href) on the site is clicked (any link).

I know you can do a code that will run while page loading but this isn't good enough as it will execute too late (after few seconds)

Anyway, this is my website www.cosmeticsbynature.com and this is the code I use. Any help will be great.

<div id="loading"><img src="doen'tallowmetopostanimage" border=0></div>


<script type="text/javascript">
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
  if (ns4)
 ld=document.loading;
 else if (ns6)
 ld=document.getElementById("loading").style;
 else if (ie4)
 ld=document.all.loading.style;
jQuery(document).click(function()
{
if(ns4){ld.visibility="show";}
else if (ns6||ie4)
var pb = document.getElementById("loading");
pb.innerHTML = '<img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0>';
ld.display="block";
});
</script>

Answer 1

//to select all links on a page in jQuery
jQuery('a')

//and then to bind an event to all links present when this code runs (`.on()` is the same as `.bind()` here)
jQuery('a').on('click', function () {
    //my click code here
});

//and to bind to all links even if you add them after the DOM initially loads (`on()` is the same as `.delegate()` here; with slightly different syntax, the event and selector are switched)
jQuery(document).on('click', 'a', function () {
    //my click code here
});

Note: .on() is new in jQuery 1.7.

Answer 2

Doing this will be easier if you include jQuery in your pages. Once that is done, you can do:

$('a').click(function() {
 // .. your code here ..
 return true; // return true so that the browser will navigate to the clicked a's href
}

Answer 3

what you are doing is binding the click handler to the document so where ever the user will click the code will be executed, change this piece of code

jQuery(document).click(function()

to

jQuery("a").click(function()

Answer 4

$("a").click(function(){
 //show the busy image
});

Answer 5

How about this - I assume #loading { display:none}

<div id="loading"><img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0></div>
<script type="text/javascript">
document.getElementById('loading').style.display='block'; // show the loading immediately
window.onload=function() 
  document.getElementById('loading').style.display='none'; // hide the loading when done
}
</script>

Answer 6

http://jsfiddle.net/vol7ron/wp7yU/

A problem that I see in most of the answers given is that people assume click events only come from <a> (anchor) tags. In my practice, I often add click events to span and li tags. The answers given do not take those into consideration.

The solution below sniffs for elements that contain both events, which are created with jQuery.click(function(){}) or <htmlelement onclick="" /> .

$(document).ready(function(){

    // create jQuery event (for test)
    $('#jqueryevent').click(function(){alert('jqueryevent');});

    // loop through all body elements
    $('body *').each(function(){

        // check for HTML created onclick
        if(this.onclick && this.onclick.toString() != ''){
           console.log($(this).text(), this.onclick.toString());
        }

        // jQuery set click events
        if($(this).data('events')){           
            for (key in($(this).data('events')))
                if (key == 'click')
                   console.log( $(this).text()
                              , $(this).data('events')[key][0].handler.toString());
        }
   });
});

Using the above, you might want to create an array and push elements found into the array (every place you see console.log