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

如果您没有获得样式，那么您可能缺少CSS文档，JS错误，或者您没有在新页面上正确构建HTML。

Answer 2

Another alternative is to break up the pages (and even panels within a page) into separate template .html files dynamically loaded and render them as needed. See the tutorial on "creating mobile apps with KnockoutJS, PhoneGap, and jQuery Mobile" http://bit.ly/crmakopgjqm