jQuery Mobile - binding to pageinit event

Question

I am trying to understand the following jQuery Mobile example.

$( '#aboutPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

What is #aboutPage in this context? What is the object pageinit is binding to?

Answer 1

aboutPage should be the id of the page.(i.e.div with data-role="page").live() attaches the funcion you have defined which contains thealert to the pageinit event of aboutPage.pageinit is triggered on a page when the page is initialized.

So in short What your code does is

it will execute the alert statement when aboutPage is initialized

The page might be initialized even if it is not in view.So even before you go to that page,the pageinit of the div will be triggered.If you are loading another html file as the new page pageinit for that page will be triggered only when you load that page into view.So,in your case if you want to do something when your div comes into view,you can try the pagebeforeshow and pageshow.pagebeforeshow will be triggered on the new page before animation starts and pageshow after animation is over.