Javascript / jQuery page change event in mobile browsers

Question

I am developing a mobile site, keeping in mind all the leading browsers - Safari, Chrome, Dolphin, Opera.

I want to show the loading element how and when a navigation / change page / new page is requested .

I cannot use the click event for anchor tags, since there are many of them with preventDefault();.

I tried the following:

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

But it does not work in Dolphin or Opera .

Can anyone suggest a cross-browser solution ?

-

EDIT . I understand that I didn’t ask my question very clearly, I apologize. I created a fiddle here http://jsfiddle.net/hiteshpachpor/7dadA/5/ based on the answer. This example uses bubbling events.

Now here is the problem I am facing. I would show that the loader ( $('.jacket').show();) every time the page changes / moves. But I do not want it to appear if the link is clicked; Instead, I want to perform other operations on my page. Now adding a line $('.jacket').hide();in all such actions would be sufficient, but it would not be very ideal for scaling the reasons.

That's why I evaluated the method 'beforeunload', but we were out of luck, as it is not compatible with cross-browser.

Any suggestions for resolving this issue?

Answer 1

. .

// 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:

, $('.jacket').show() "".

$('.jacket').hide();

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

$('.prevent').click(function(event) {
    event.preventDefault();
    $('.jacket').hide();
});

Answer 2

, AJAX? . div , ajax start .

:

<nav>
  <button data-url="homeURL">Home</button>
  <button data-url="anotherURL">Other</button>
</nav>
<div id="loadhere"></div>

jquery :

//on button click
$('nav button').click(function(){
  //set the url 
  url = $(this).attr('data-url');
    //load the page
    $('#loadhere').load(url);
});

//ajax start handler
$(document).ajaxStart(function(){
  $('#loadhere').text('LOADING');
});

codepen

,

Answer 3

onLoad body, div, setTimeout 3 , div div/

EDIT: , . , ( );)

Answer 4

jquery. 1.4

  $.mobile.loading( "show", { //show loading image
    text: "Your request is processing. please wait ...",
    textVisible: true,
    theme: "b",
    textonly: false,
  });

JQuery Mobile Loader Widget.

Answer 5

:

event.isDefaultPrevented().

$(function() {
    $('.jacket').hide();

    $('.prevent').click(function(event) {
        event.preventDefault();
    });

    $('a').click(function(event) {
        if (!event.isDefaultPrevented())
            $('.jacket').show();
    });
});

JSFiddle: http://jsfiddle.net/F4uPx/

Caution: make sure you assign an event handler $('a').click()after other event handlers; otherwise, it will be executed first and will fail with an error, as preventDefault()it will not start.