jQuery Ошибка навигации по мобильной сети

Question

Когда я нахожусь на главной странице и использую панель навигации вверху, чтобы перейти на страницу2, а затем вернусь домой. Навигационная панель глючит, и я не знаю, почему. Как я могу это исправить?

Fiddle: https://jsfiddle.net/3d1oyx2v/15/

HTML:

<div data-role="page" id="Home"> 
    <div data-role="header" data-position="fixed"> 
     <h1 style="text-align:left; margin-left:40px;">Home</h1> 
<a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

    </div> 
    <!-- /header --> 
    <div data-role="content" id="homeContent"> 
     <p>Home.</p> 
    </div> 
    <!-- /content --> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
    <div data-role="panel" id="bars" data-theme="a"> 
     <!-- panel content goes here --> 
     <ul data-role="listview" class="ui-listview-outer"> 
      <li><a href="#Home">Home</a> 

      </li> 
      <li><a href="#page2">Page 2</a> 

      </li> 
    </div> 
    <!-- /panel --> 
</div> 
<!-- /page --> 
<div data-role="page" id="page2"> 
    <div data-role="header" data-position="fixed"> 
     <h1 style="text-align:left; margin-left:40px;">Page 2</h1> 
<a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

    </div> 
    <!-- /header --> 
    <div data-role="content"> 
     <p>Page 2.</p> 
    </div> 
    <!-- /content --> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
    <div data-role="panel" id="bars" data-theme="b"> 
     <!-- panel content goes here --> 
     <ul data-role="listview" class="ui-listview-outer"> 
      <li><a href="#Home">Home</a> 

      </li> 
      <li><a href="#page2">Tee Times</a> 

      </li> 
     </ul> 
    </div> 
    <!-- /panel --> 
</div> 
<!-- /page --> 

Answer 1

Это происходит потому, что у вас есть повторяющейся идентификатор (#bars для обоих меню), и что приводит к беде.

Устранить проблему путем изменения идентификаторов, таким образом они являются уникальными (например: #bars1 для домашней страницы и #bars2 на странице 2), а также значок ссылки приводится ссылка, соответственно, то он будет работать нормально (see it on this JSFiddle)

<div data-role="page" id="Home"> 
    <div data-role="header" data-position="fixed"> 
     <h1 style="text-align:left; margin-left:40px;">Home</h1> 
     <a href="#bars1" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

    </div> 
    <!-- /header --> 
    <div data-role="content" id="homeContent"> 
     <p>Home.</p> 
    </div> 
    <!-- /content --> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
    <div data-role="panel" id="bars1" data-theme="a"> 
     <!-- panel content goes here --> 
     <ul data-role="listview" class="ui-listview-outer"> 
      <li><a href="#Home">Home</a> 

      </li> 
      <li><a href="#page2">Page 2</a> 

      </li> 
     </div> 
     <!-- /panel --> 
    </div> 
    <!-- /page --> 
    <div data-role="page" id="page2"> 
     <div data-role="header" data-position="fixed"> 
      <h1 style="text-align:left; margin-left:40px;">Page 2</h1> 
      <a href="#bars2" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

     </div> 
     <!-- /header --> 
     <div data-role="content"> 
      <p>Page 2.</p> 
     </div> 
     <!-- /content --> 
     <div data-role="footer" data-position="fixed"> 
      <h4>Page Footer</h4> 

     </div> 
     <!-- /footer --> 
     <div data-role="panel" id="bars2" data-theme="b"> 
      <!-- panel content goes here --> 
      <ul data-role="listview" class="ui-listview-outer"> 
       <li><a href="#Home">Home</a> 

       </li> 
       <li><a href="#page2">Tee Times</a> 

       </li> 
      </ul> 
     </div> 
     <!-- /panel --> 
    </div> 
    <!-- /page -->