Question

Before updating jquery mobile on a site from version: v1.0b1 to the present: 1.2.0, this worked:

$(document).ready(function() {
   $('.ui-page').live('pageshow', function(e, ui) {
     // do something
   });
});

But after updating this no longer works. But this does:

$(document).ready(function() {

});

$('.ui-page').live('pageshow', function(e, ui) {
   // do something
});

If I take out the code and put it outside dom ready it works. Is there a way to make it work inside the dom ready?

Answer 1

You should replace $(document).ready() with $(document).bind('pageinit') on jquery mobile.

Important: Use $(document).bind(‘pageinit’), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

For more details, refer JQuery Mobile