JQuery Mobile internal hash links not working

Question

I am creating a mobile website with JQuery Mobile. I have internal links which link to divs. The first one works, but the second link, which has the exact same format except for the link and text, doesn't work. Any reason why?

Answer 1

Are you using multiple data-role="page"'s in your code?
If so, you'll need to use the subpage widget and replace the children page's with "subpage".

From jQuery Mobile Docs - Linking Pages

Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.

Answer 2

What I believe the OP is (possibly) asking is that s/he has some page with a "quick nav" menu system to skip down to specific headings without having to manually scroll down to each one individually - something often times found (or use to be, anyway) on lengthy pages with a loooot of content. Something like:

<div id="quick_nav_menu">
    <a href="#heading1">Heading 1</a>
    <a href="#heading2">Heading 2</a>
... <a href="#headingLast">Last Heading</a>
</div>
...
<h1 id="heading1">Heading 1</h1>

Clicking one of the quick_nav_menu links results in an "Error Loading Page"...error. Adding something like "rel='external'" or "data-ajax='false'" doesn't yield much better results unfortunately. I'm in the midst of researching a resolution to this issue myself.

UPDATE

I've worked around this issue myself with a little JavaScript (jQuery). I grab a hold of each of the quick_nav_menu links and attach a click event to each one. The click event extracts each hyperlinks's href attribute, splits it at the hash tag which results in a list with two elements (the first element being empty): [, headerId]. It grabs the second list item (the heading's ID), and uses the scrollIntoView() JavaScript method to scroll down to it. It then returns "false" to inhibit the hyperlink's default behavior.

Ex.

$(document).ready(function () {
    $("#quick_nav_menu a").click(function () {
        var href = $(this).attr("href");
        var headerId = href.split("#")[1];
        document.getElementById(headerId).scrollIntoView();
        return false;
    });
});

Unfortunately pressing the back button on the web browser doesn't take the user back up to the quick_nav_menu but rather scrolls back to the previous jquery Mobile page, but it works well enough for my purposes.