Correct way to use phonegap & jquery mobile with multiple html pages

Question

I have an application which uses jquery mobile and consists of a few html pages each with a few jquery page elements within them. On a desktop browser it all works fine but when I load it on my android device (running 2.3) the first page looks fine, but whenever you click a link (lets say from index.html -> logged-in-menu.html jquery mobile doesn't seem to kick in and no stylings are applied. If I then go BACK to index.html from the current page then index.html is left unstyled.

So is there a correct way to move between separate html pages? I don't get any browser errors so everything seems to be working fine but none of the styles or features of jqm are applied.

Just so everyone is on the same page, the links use data-ajax="false" so they cause a complete page refresh (as this is required), the app can not work as a single page application so putting everything into one big html file is not an option.

Answer 1

If you are not getting styling then you either have a missing CSS document, a JS error, or you did not structure the HTML properly on the new page.