jQuery Mobile - can't bind pagebeforechange to

Question

I could only ever bind pagebeforechange to the entire jquery mobile document, not an individual page. Can anyone explain why this doesn't work?

Answer 1

Selector for JQM pages:

$('.ui-page')

Adding the event listener to all the pages in the document can be done as:

$(document).delegate(".ui-page","pagebeforehide", function(evt, ui){
   alert('pagebeforehide fired');
}

Fiddle using delegate:

Note using bind instead of delegate will NOT work for the aforementioned selector as ui-page class is added only on page creation.

In-order to use bind, use the following selector:

$("div[data-role='page']")

And add the event listener using(only after document is ready or body has loaded):

$("div[data-role='page']").bind("pagebeforehide", function(evt, ui{
alert('pagebeforehide fired');
}

Fiddle using bind:

I also recommend using mobileinit event rather document ready!

Answer 2

I'm having the exact same problem, but I at least have a work-around for you. Warning: this is stupid, horrible code. But it does the job.

window.doubleLoadPreventer = 0;

$(document).bind('pagebeforechange', function(e, data){

    if ( window.doubleLoadPreventer === 1 ) {
        window.doubleLoadPreventer = 0;
        return;
    } else {
        window.doubleLoadPreventer = 1;
    }

    //your normal event handler code here
}

Answer 3

With jQuery Mobile - I'm pretty certain you don't bind to the document, but to the pageinit property.

Binding to the doc would create issues... keep in mind for this link to work on #home again you will need another event listener for beforepageshow or what you before the page is shown again.

This doc is very helpful...

Answer 4

$("div[data-role='page']").live( "pagebeforehide", function( event ) {
alert('This alert should trigger before Next Page Here is shown?');
});

(check the link for details) you can also use bind instead of live , Hope it helped.