title: jQuery Mobile hash navigation doesn't work in multipage template when entering site from interior page
body: <h1>Overview</h1>
  
  <p>I've set up a site using jQuery Mobile. The problem I'm having is that when I enter the site from an interior page (like the blog pages) and click on the navigation buttons in the header, I can go back to the homepage but then none of the ajax/hash-based navigation links work. In my header navigation I've linked the left-side navigation buttons directly with hrefs, <strong>not</strong> using data-rel="back". I'm not trying to use the buttons to imitate the browser's back button, but rather for absolute navigation. I've tested this on the desktop in Chrome and Firefox and on an iPhone running iOS 5 in Mobile Safari; the behavior is the same in all browsers.</p>
  
  <p>Edit: (Note specific questions below in <strong><em>bold italic</em></strong>.)</p>
  
  <h1>What works and what doesn't</h1>
  
  <p>For example, if you go to the interior page <a href="http://slawson.org/blog/" rel="nofollow noreferrer">http://slawson.org/blog/</a> and then click the <code>&lt; Kim</code> button in the header to go back to the homepage, then you can only go to absolute links (like Blog) but none of the hash-based links (the other links under the "Portfolio" and "About" headers) work... clicking on the links does not fire a page transition, instead the links just blink and do nothing. </p>
  
  <p>If you enter the site from the homepage &mdash; <a href="http://slawson.org/" rel="nofollow noreferrer">http://slawson.org/</a> &mdash; or one of the subpages of the homepage  &mdash; like <a href="http://slawson.org/#web" rel="nofollow noreferrer">http://slawson.org/#web</a> &mdash; this problem does not occur.</p>
  
  <ul>
  <li><p>index.html &mdash; contains most of the other pages that use hash-based navigation (<strong>these don't work</strong>), e.g.:</p>
  
  <ul>
  <li>Web Sites</li>
  <li>iOS Applications</li>
  <li>Print Publications</li>
  <li>Logos &amp; Branding</li>
  <li>...<p></li>
  </ul></li>
  <li><p>blog/index.html and blog/.../*.html &mdash; regular pages loaded via JQM's ajax loader (<strong>these work</strong>).</p></li>
  </ul>
  
  <h1>Question</h1>
  
  <p><strong><em>Is there a problem with JQM and ajax navigation when entering sites from interior pages, or is this something that can be fixed by restructuring things or adding some jQuery somewhere?</em></strong> I'd like to avoid breaking every page into a separate html file.</p>
  
  <h1>Versions</h1>
  
  <p>I'm using jQuery 1.8.2 and jQuery Mobile 1.2.0.</p>
  
  <hr/>
  
  <h2>Edit:</h2>
  
  <p>I looked at the JQM multi-page template docs and at these related StackOverflow questions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/6462686/jquery-mobile-page-navigation-behaviour">jQuery mobile page navigation behaviour</a></li>
  <li><a href="https://stackoverflow.com/questions/9373680/facing-an-issue-in-jquerymobiles-multi-page-template-stucture?rq=1">Facing an issue in jquerymobile&#39;s multi page template stucture </a></li>
  <li><a href="https://stackoverflow.com/questions/12828269/jquery-mobile-link-from-external-page-singlepage-template-to-an-internal-pag">JQuery Mobile - link from external page (SinglePage-template) to an internal page (MultiPage-template)</a></li>
  </ul>
  
  <p>Things I've tried:</p>
  
  <h3>data-url</h3>
  
  <p>I tried adding <code>data-url</code> to the multi-pages in index.html, like so:</p>
  
  <pre><code>&lt;div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items"&gt;
  </code></pre>
  
  <p>but that didn't help.</p>
  
  <h3>data-rel="external"</h3>
  
  <p>I tried adding <code>data-rel="external"</code> to links to the homepage, like this link on the navigation button on the blog page:</p>
  
  <pre><code>&lt;a href="/" data-rel="external" data-role="button" data-direction="reverse" data-icon="arrow-l"&gt;Kim&lt;/a&gt;     
  </code></pre>
  
  <p>but that didn't help either.</p>
  
  <h3>data-ajax="false"</h3>
  
  <p>I tried adding <code>data-ajax="false"</code> to links to the homepage, like this link on the navigation button on the blog page:</p>
  
  <pre><code>&lt;a href="/" data-ajax="false" data-role="button" data-direction="reverse" data-icon="arrow-l"&gt;Kim&lt;/a&gt;       
  </code></pre>
  
  <p>This works (i.e., you can go to the homepage, then all of the multi-pages work) <strong>BUT</strong> the transition does not fire going to the homepage. <strong><em>Is there a way to add a transition to this link, perhaps by giving it a class and then using some jQuery to bind to that class to fire the transition?</em></strong> or is there a better way? (Of note, the back button works fine after I add data-ajax="false" to the link to the homepage. <a href="https://stackoverflow.com/a/10467124/1821016">Clement Ho's answer here</a> implies that adding it breaks the back button, but I'm not seeing that)</p>