在多页面模板中的页面之间导航后，Jquery 移动面板停止工作答案

【问题标题】：Jquery mobile panel stops working after navigation between pages in multi page template在多页面模板中的页面之间导航后，Jquery 移动面板停止工作
【发布时间】：2014-01-22 21:08:31
【问题描述】：

通过面板导航离开第一页后，在 jquery 移动应用程序的多页模板设置中。当通过另一种导航形式返回第一页时，面板看起来“挂起”。

仔细观察，您可以看到左侧的一个小阴影，它是隐藏面板。显示面板的按钮不再起作用。

这是一个复制问题的演示。

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>Panel Issue Demo</title>


    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>

    <div data-role="page" id="one">
        <div data-role="header" data-position="fixed">
            <h1>One</h1>
            <a href="#one-menu" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
        </div>

        <div role="main" class="ui-content">
        </div>

        <div data-role="panel" data-position="left" data-display="overlay" data-theme="a" id="one-menu">
            <ul class="ui-listview ui-alt-icon ui-nodisc-icon" data-role="listview">
                <li><a href="#two" data-ajax="false">Two</a></li>
             </ul>
        </div>
    </div>

    <div data-role="page" id="two">
        <div data-role="header" data-position="fixed">
            <h1>Two</h1>
        </div>

        <div role="main" class="ui-content">
            <a href="#one" data-ajax="false">One</a>
        </div>
    </div>
</body>

复制的步骤很简单：

打开面板并点击“二”
点击“一”
面板现已损坏。

有人知道是什么原因造成的吗？

小提琴：http://jsfiddle.net/jVzNk/

【问题讨论】：

如果您希望 JQM 在页面之间导航时正常工作，请从链接中删除 data-ajax="false"。 jsfiddle.net/Palestinian/jVzNk/1/show
将 data-animate="false" 添加到 div#one-menu。这会禁用菜单上的动画，并且您的错误会消失。这似乎是由于显示面板 2 时由于某种原因未调用关闭动画的完整回调引起的。这可能应该在 GitHub 上作为问题提交。
@Matt 他导航到禁用 ajax 的页面，启用 ajax 解决了问题，就像我在第一个评论的演示中一样。 JQM 基于 Ajax 导航。

标签： javascript html jquery-mobile mobile

【解决方案1】：

jQuery Mobile 基于Ajax Navigation 用于在页面之间切换和加载新页面。当您使用 data-ajax="false" 链接页面时，您将禁用 Ajax 导航 并作为页面内的 internal div 跳转/跳转到该 div。

要在 jQuery Mobile 中的页面之间链接，应该启用 Ajax 导航。

<div data-role="page">
  <a href="#step3" data-ajax="false">Step 3</a>

  <div id="step1">
    <!-- content -->
  </div>

  <div id="step2">
    <!-- content -->
  </div>

  <div id="step3">
    <!-- You jump to this div -->
  </div>
</div>

可以在 jQM 中使用它，但不能用于在 多页面模型中更改页面。另外，当您想通过 HTTP 而不是 Ajax 正常加载页面，以及当您想提交 forms 时，请使用 data-ajax="false"。

Demo

【讨论】：