Question

我有两个简单的页面。对于他们，我使用了最新的稳定版本jQuery Mobile 1.4.5。

test2.php -只是指向test.php的链接

<!doctype html> 
<html> 
<head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="test2" data-dom-cache="false">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>Test2</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="test.php" class="ui-btn ui-btn-inline ui-icon-action ui-btn-icon-left ui-corner-all ui-shadow">Go to Test</a>
    </div>
</div>
</body>
</html>

test1.php -从http://demos.jquerymobile.com/1.4.5/tabs/#Usenavbarfortabs

中列出正式示例

<!doctype html> 
<html> 
<head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="test" data-dom-cache="false">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">
         <h1>Test</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="test2.php" class="ui-btn ui-btn-inline ui-icon-action ui-btn-icon-left ui-corner-all ui-shadow">Go to Test2</a>

        <div id="tabs" data-role="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-ajax="false">one</a></li>
                    <li><a href="#two" data-ajax="false">two</a></li>
                </ul>
            </div>
            <div id="one" class="ui-body-d ui-content">
                <h1>First tab contents</h1>
            </div>
            <div id="two">
                <ul data-role="listview" data-inset="true">
                    <li><a href="#">Acura</a></li>
                    <li><a href="#">Audi</a></li>
                    <li><a href="#">BMW</a></li>
                    <li><a href="#">Cadillac</a></li>
                    <li><a href="#">Ferrari</a></li>
                </ul>
            </div>
        </div>

    </div>
</div>
</body>
</html>

默认链接行为：Ajax

要启用动画页面过渡，所有指向   外部页面（例如products.html）将通过Ajax加载。去做这个   毫不客气地，该框架解析链接的href来制定一个   Ajax请求（Hijax）并显示加载微调器。这都是   由jQuery Mobile自动完成。

如果Ajax请求成功，则将新页面内容添加到   DOM，所有移动窗口小部件都会自动初始化，然后新页面是   通过页面过渡动画进入视图。

如果Ajax请求失败，则框架将显示一个小错误   消息覆盖（在“ a”样例中样式化），在   时间短，因此不会中断导航流程。查看范例   错误消息。

因此，如果我查看一个页面，则此页面已满载并成为主页。从现在开始，任何页面都将加载Ajax。这些页面被去除了多余的代码，jQuery将仅加载标记为data-role =“ page”的第一个DIV。

问题：如果我从test.php导航，则选项卡运行正常。如果我按一下指向test2.php的链接，则第二页将加载到内存中并按预期运行。但是，如果我从test2.php开始导航并点击链接到test.php，一切都会发疯。选项卡不起作用，并且在页面之间导航会导致多个孤立的<span class="ui-icon-loading"></span><h1>loading</h1>进入内存。使用后退/前进有时会使重复的页面进入内存。另外，如果页面更复杂，那么还有更多疯狂的事情。请告诉我我在哪里做错了。我想完全理解会发生什么。

我推断TABS元素的引发会产生所有问题。仅当未在首页/首页中初始化元素时，这种情况才会发生（这是不可能的）。如果加载了Ajax，则整个jQuery都会失败。但是我不想加载为外部页面或没有ajax。

jQuery Mobile 1.4.5来源： http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js

JQuery Mobile 1.4.5标签在第二个（外部）页面中进行了初始化

0 个答案: