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

Question

我正在使用 jquery mobile 创建一个 apache cordova 应用程序。我有一个登录页面，成功登录后，使用 $( ":mobile-pagecontainer").pagecontainer("change", "mainpage.html"); 在 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 并只获取带有 data-role="page" 的第一个 div 并将其加载到 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 的 anchor > 正在工作。
但是您会注意到浏览器 url-bar (start.html#mainpage.html) 中一团糟

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

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

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

这样您就不会在浏览器的网址栏中弄得一团糟。但是您无法使用浏览器的后退按钮导航回来。重新加载会将您带到上一页。