Question

我正在使用jquery mobile创建一个apache cordova应用程序。我有一个登录页面，在成功登录后，页面被重定向到mainpage.html，使用 $（“：mobile-pagecontainer”）。pagecontainer（“change”，“mainpage.html”）; 在mainpage.html上，我有一个使用navabar的多页模板。代码如下： -

<!-- 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为 第二页的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中弄得一团糟。但是您无法使用浏览器返回按钮返回。重新加载将带您进入上一页。

jquery移动导航链接无法在第一次点击时工作

1 个答案: