Hash navigation problem

Hash navigation problem

I have a weird problem with internal pages linked with hash.

I have two pages (divs) which are called with links like this:
  1. <a href="#ma_options" data-icon="gear" data-iconpos="notext" data-role="button"></a>
And the pages looks like this:
  1. <div id="ma_options" data-role="page" data-theme="c" >
  2.      <div data-theme="a" data-role="header" class="ui-bar-a ui-header" role="banner">
  3.         <h1 tabindex="0" role="heading" aria-level="1" data-theme="a">{% trans 'Django administration' %}</h1>
  4.     </div>
  5.     <div data-role="content">       
  6.         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
  7.             <li><a href="#ma-actions">{% trans "My Recent Actions" %}</a></li>
  8.         </ul>
  9.     </div>
  10. </div>
  11. ...
  12. <div id="ma-actions" data-role="page" data-theme="c">
  13.     <div data-role="content">
  14.     ...
  15.     </div>
  16. </div>
Everything works as expected in Mozilla Firefox (desktop), but when testing on a mobile device or Google Chrome (desktop) I get a weird bug.

The first link which opens the option page works fine, but when I click the second link which is within the options page (href=#ma-actions), it should open the second page but instead it mess the URL and lead to an nonexistent page instead.

Instead of swapping the #ma-options for #ma-actions in the URL like Firefox does, it change the URL for this:
  1. http://site.com/ma-options#ma-action
It seems to remove the "#" from the ma-options hash and append the new hash after.

I have a live sandbox available here: http://jqmobile-sandbox.motion-m.ca/ma/

Username: admin
Password: admin (the project is reseted/updated every hours)

To replicate the bug, use Google Chrome and click on the gear in the header, then click "My Recent Actions".

This will lead to a page that doesn't exist. To see the expected behavior repeat these steps with Firefox.

Thanks