javascriptjquerygoogle-chromeoperadolphin-browser

Javascript / jQuery page change event on mobile browsers


I am designing a mobile website keeping in mind all leading browsers - Safari, Chrome, Dolphin, Opera.

I want to show a "loading" element as and when the page navigates / changes / new page is requested.

I cannot use click event on anchor tags as there are many ones present with preventDefault();.

I tried the following:

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

But it does not work in Dolphin or Opera.

Can someone suggest a cross-browser solution?

--

EDIT: I realize I wasn't very clear in asking my question, apologies. I created a fiddle here- http://jsfiddle.net/hiteshpachpor/7dadA/5/ based on the response. The example makes use of event bubbling.

Now here's the problem I am facing. I would be showing that loader ($('.jacket').show();) each time page changes / navigates. But I don't want it to show up if a link is clicked; I want to do other operations on my page instead. Now, adding the $('.jacket').hide(); line in all such actions would totally suffice but it will not be very ideal for scaling reasons.

This is why I was evaluating the 'beforeunload' method, but no luck there as it is not cross-browser compatible.

Any kind suggestions to tackle this issue?


Solution

  • As was mentioned in the comments. However I prefer event delegation instead of attaching events all over the dom.

    // this is your original eventListener which prevents the default action (aka, navigating away)
    $('#random-link').click(function(event){
        event.preventDefault();
        $('#result').text('I was clicked from random-link event.')
    });
    
    // this would be the delegated listener. It wouldn't have to be all "a" tags 
    // that you respond to. It could be any css selector that causes the 
    // loading message that you want.
    $(window).on('click', 'a', function() {
       alert('I still bubble up.');
    });
    

    Update:

    Perhaps you should not trigger $('.jacket').show() for "links".

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