SiteKickr Web Development

Combining custom JavaScript with jQuery Mobile

If you've tried integrating your own JavaScript into a jQuery Mobile site, you might find that it executes only once, on the first page the user visits.

This is not a bug, but purely a side-effect of the way jQuery Mobile uses AJAX requests to load pages.

By wrapping your JS as seen below, you're script will be called with each page "transition":

$('div').live('pageshow',function(event, ui){
  initMySite();
}

To ensure that your code is called on the first page, as well as all subsequent pages, you'll need to do the following:

$(document).ready(function() {
  initMySite();
  $('div').live('pageshow',function(event, ui){
    initMySite();
  });
});

initMySite = function() {
  // my initialization code goes here
}