Javascript / jQuery page change event on mobile browsers -

i designing mobile website keeping in mind leading browsers - safari, chrome, dolphin, opera.

i want show "loading" element , when page navigates / changes / new page requested.

i cannot use click event on anchor tags there many ones present preventdefault();.

i tried following:

$(window).on('beforeunload', function() { ... }); 

but not work in dolphin or opera.

can suggest cross-browser solution?

--

edit: realize wasn't clear in asking question, apologies. created fiddle here- http://jsfiddle.net/hiteshpachpor/7dada/5/ based on response. example makes use of event bubbling.

now here's problem facing. showing loader ($('.jacket').show();) each time page changes / navigates. don't want show if link clicked; want other operations on page instead. now, adding $('.jacket').hide(); line in such actions totally suffice not ideal scaling reasons.

this why evaluating 'beforeunload' method, no luck there not cross-browser compatible.

any kind suggestions tackle issue?

as mentioned in comments. prefer event delegation instead of attaching events on dom.

// original eventlistener prevents default action (aka, navigating away) $('#random-link').click(function(event){     event.preventdefault();     $('#result').text('i clicked random-link event.') });  // delegated listener. wouldn't have "a" tags  // respond to. css selector causes  // loading message want. $(window).on('click', 'a', function() {    alert('i still bubble up.'); }); 

update:

perhaps should not trigger $('.jacket').show() "links".

$('.jacket').hide();  $('a:not(.prevent)').click(function() {     $('.jacket').show(); });  $('.prevent').click(function(event) {     event.preventdefault();     $('.jacket').hide(); });