Question

我有两个非常简单的页面，如下所示。如果我浏览到“mysite.com/”，网络服务器会返回“index.html”内容，这是正常的。如果我然后单击“page2”链接，jquery mobile将第二页加载到DOM中，但不从DOM卸载第一页，尽管它从视图中隐藏（显示：无）。

我现在在DOM中有2个<div data-role="page">元素，屏幕上只显示第2页。如果我然后单击第2页上的“索引”链接，jquery mobile将从DOM卸载page2，并将index.html页面加载到新的DOM元素中。我现在在DOM中有两个<div id="index">实例，这显然是不正确的！

发生了什么事？我以为我会在此之前询问它作为一个错误，但它似乎是一个非常简单的例子，完全被破坏了！

的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

    <div data-role="page" id="index">
        <a href="page2.html">Page2</a>
        <p>index page</p>
    </div>


</body>
</html>

page2.html

<html>
<body>
    <div data-role="page" id="page-2">
        <a href="index.html">Index</a>
        <p>Page 2</p>
    </div>
</body>
</html>

编辑：我找到了page2.html链接到而不是“index.html”的变通方法，它阻止了第二次重复加载，但是加载的原始页面始终保留在DOM中似乎仍然是错误的。

编辑2：这是一个已知问题https://github.com/jquery/jquery-mobile/issues/4050 - 尽管在发布此问题之前进行了大量的Google搜索，我仍然无法找到它。我可能会针对他们的文档提出错误报告，因为这是IMO非常意外的行为。

Answer 1

这是jQuery Mobile的默认行为，第一个登陆页面始终保存在DOM中。它只删除未缓存的{em>外部页 data-dom-cache="true"。您将始终在DOM中有两个页面，登录页面和活动外部页面。

然而，如果您希望在导航到其他页面后删除目标网页，请将data-external-page="true"添加到目标网页的页面div。创建pagecreate后，将其标记为已删除.page("bindRemove")。这是jQuery Mobile删除外部页面的方式。

注意只要.page()窗口小部件未被.pagecontainer()窗口小部件删除，就会有效。

<div data-role="page" id="pageID" data-external-page="true">

$(document).on("pagecreate", "#pageID", function (e) {
    $(e.target).page("bindRemove");
});

Demo

Answer 2

我使用两个文件index.html和page2.html按照您的问题中所述创建了一个测试，并使用Chrome（版本38.0）进行了测试。我已加载index.html，然后导航到page2.html，然后返回index.html。使用Chrome开发者工具，然后我检查了页面中的元素并找到了以下内容（屏幕截图）：

Screen shot of Elements/DOM

正如我们所见，有一个名为index的页面实例和一个名为page-2的页面实例，但没有重复。

我意识到这与你自己的结果不符，但我提供这个答案表明这个故事按预期工作。如果我们确定这个答案逻辑中的一个缺陷，我会很乐意删除它。

使用index.html时，页面未从DOM卸载

2 个答案: