Question

I have 3 pages:

By clicking the “filter” button on page1, it takes you to page2. Clicking the “grey buttons” on page2 takes you to page3. Clicking the “red buttons” on page2 take you back to page1.

But during all these transitions, the pages lose their styles.

I tried adding this code on page1, but it didn’t seem to work very well:

$(document).bind('pagechange', function() {
          $('.ui-page-active .ui-listview').listview('refresh');
          $('.ui-page-active :jqmData(role=content)').trigger('create');
        });

Answer 1

It seems that When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link’s href to formulate an Ajax request (instead of allowing the browser’s default link behavior of requesting that href with full page load).

This means that any scripts and styles referenced the head of a page won’t have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP.

So I tried to consolidate the styles, as well referenced the same set of stylesheets and scripts in the head of every page. This fixed the issue.

http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html