jquery移动导航链接在第一次点击时不起作用

Question

我正在使用 jquery mobile 创建一个 apache cordova 应用程序。 我有一个登录页面，成功登录后，页面使用 $( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html");$(":mobile-pagecontainer").pagecontainer("change", "mainpage.html"); em> 在 mainpage.html 上，我有一个使用导航栏的多页模板。代码如下：-

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active" data-icon="home" rel="external" data-ajax="false">Home</a>
        </li>
        <li><a href="#pagetwo" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a>
        </li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p>
    <p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home" rel="external" data-ajax="false">Home</a>
        </li>
        <li><a href="#" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a>
        </li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>No buttons are pre-selected (highlighted) in this page..</p>
    <p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div>

问题是，当我点击 第二页 选项卡时，它不会在第一次加载。再次单击它时，它会加载 ID 为 page two

的 div

能否请您帮我纠正第一次单击时无法加载第二页的问题？

Answer 1

懒惰的解决方案：
使用纯 javascript 更改页面。

location.href = "mainpage.html";

复杂/肮脏的解决方案

我能够重现您的问题。

问题是，jquery-mobile 如何处理 ajax 导航。如果您从 page1.html 链接到 page2.html。 Jquery-mobile 将查看 page2.html 并仅获取第一个 div 和 data-role="page" 并将其加载到 page1.html

如果您链接到多页，您将始终获得第一页，仅此而已。要更改此设置，您必须将 rel="external" 添加到链接中。这样框架会加载整个页面、页眉和包含的所有页面。

有了这些知识，我们唯一应该在$( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html") 上更改说jqm 他应该重新加载页面。
The Api doc 说有一个选项reload 或reloadPage（已弃用） .但不幸的是，这并没有改变什么。我不知道它是否不起作用或我不理解该选项。

$( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html",  {reloadPage : true});

如果您附加选项 dataUrl : "mainpage.html"，pagetwo 仍然没有加载到 DOM，但 pagetwo 的锚点正在工作。
但是你会注意到浏览器的 url-bar (start.html#mainpage.html)

 $( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html",  {reloadPage : true, dataUrl : "mainpage.html"});

现在您可以附加另一个选项 changeHash: false 以在加载新页面时不更改哈希/网址。

 $( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html",  {reloadPage : true, dataUrl : "mainpage.html", changeHash: false});

这样您就不会在浏览器的 url-bar 中弄得一团糟。但是您无法使用浏览器的后退按钮向后导航。并且重新加载会将您带到上一页。