jQuery Mobile - can't bind pagebeforechange to page id?

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

$("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.

Answer 2

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 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...