JQuery Mobile internal hash links broken

Question

I am creating a mobile site with jQuery Mobile. I have internal links that reference a div. The first one works, but the second link, which has the same format except the link and the text, does not work. Any reason why?

Answer 1

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

From jQuery Mobile Docs - Linking Pages

Note. You cannot link to a multi-page document with active Ajax navigation, as the infrastructure only loads the first page, not the full set of internal pages. In these cases, you should contact without Ajax (see the next section) to completely refresh the page to prevent potential hash collisions. Currently there is a subpage plugin that allows you to download multi-page documents.

Answer 2

I suppose the OP (maybe) asks that it has a page with a quick jump menu system to go to certain headings without having to manually scroll down to each individually - something was often found (or, in any case, use it ) on long pages using loooot content. Sort of:

 <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 leads to the error "Error loading page" .... Adding something like "rel = 'external" or "data-ajax =' false" does not, unfortunately, give much better results. I am at the very beginning of the study of this problem.

UPDATE

I bypassed this problem myself with a little JavaScript (jQuery). I grab each of the quick_nav_menu links and attach a click event to each of them. The click event retrieves each href attribute of the hyperlink, splits it into a hash tag, which leads to a list with two elements (the first element is empty): [, headerId]. It captures the second element of the list (header identifier) ​​and uses the JavaScript scrollIntoView () method to scroll to it. It then returns false to disable the default behavior of the hyperlink.

Ref.

 $(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 in a web browser does not allow the user to return to quick_nav_menu, but rather will go to the previous page of mobile jquery, but for my purposes it works quite well.