I’ve got a jquery-mobile app with two “real” html pages, but many more data-role="page" divs. The problem comes when going from the first real html page to the next real page: Navigation quits working. There’s no custom javascript, I’m just using the jqm library.
When the first real page is loaded, I am able to navigate around the data-role="page" items without a problem using things like <a href="#oneA">one A</a>, which takes me to <div data-role="page" id="oneA">, and similarly oneB, oneC, etc.
If I go to the second real page, I am able to navigate around the data-role="page" items without a problem using things like <a href="#twoA">two A</a>, which takes me to <div data-role="page" id="twoA">, and similarly twoB, twoC, etc.
But the problem is if I click a link on the first real page that takes me to the second real page (instead of hitting the page directly), then jquery mobile seems to be confused, and refuses to switch to any other <div data-role...> pages. It just stays on the first data-role page when any links are clicked. The link in the browser hover looks correct (it has the trailing #twoB, for instance, but doesn’t navigate there).
Is this an instance where jquery-mobile (I’m using the latest: 1.0.1) just plain falls-down and I need to break-down and write some of my own javascript?
What is missing is the
rel="external"attribute in the anchor tag that takes you from the first page to the second. So instead of<a href="secondPage">second page</a>, try<a href="secondPage" rel="external">second page</a>.