Question

When I load an initial page the $(document).ready() function works just fine.

However – when I prefetch a link to a page that I want to load for UI performance reasons, that page does not run it’s document ready method.

Has anyone else run into this? Any suggestions?

My next thought is to just put the two pages into one, but I would prefer keeping them separate.

Answer 1

You should not use the $(document).ready() function for jquery mobile pages because of the prefetching.

The jQuery Doc now highlights this FAQ in the documentation on events.

You should set your event handler via the pageinit event.

Example from the doc:

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

Also be careful — because of the AJAX loads the scripts you are using should be on the first page loaded, and actions for other pages should be handled by event handlers.