jquery - 为什么 jQuery Mobile 总是在 DOM 中加载“原始”页面？

Question

我开始使用 jQuery Mobile，有一种行为让我产生了很多疑问，主要与对元素使用 ID 有关。

我的页面左侧有一个菜单（一个面板，具有文档所说的唯一 ID），然后是标题/内容/等，都在“页面”div 内。

当我导航到不同的页面时，jQuery 将首先与页面一起加载的“原始”页面 div 保存在 DOM 中。如果我继续导航，DOM 中加载的其他页面确实会消失，它始终保持“活动”页面和“原始”页面。

谢谢！
丹尼尔

score 0 · Accepted Answer

原始文件保存在 DOM 中，用于缓存和转换。如果没有同时加载两个页面，许多转换是不可能完成的。如果在转换期间它们没有同时加载，它也可能导致转换中间的显着延迟。

据我所知，如果不使其成为单页应用程序，就无法避免它。

是的，它确实会产生重复的 ID，因此在 jQM 中应该避免使用 ID。

但是，您可以在转换到下一页后安全地删除多余的页面，但这当然会破坏缓存。

score 0 · Accepted Answer

要从 DOM 中删除第一页，我使用以下命令：

$(document).one('pageshow', "div:jqmData(role='page')", function(event, ui){
    $(ui.prevPage).remove();
});

我不知道 jQM 开发人员是否建议这样做，但它运行良好并解决了另一个库在导航回第一页时无法重新初始化的问题。

score 0 · Accepted Answer

这是一个代码片段，它将在导航离开后从 DOM 中删除页面。

$('[data-role="page"]').live('pagehide', function () {
    $(this).remove();
});

正如其他人所说，要选择具有 pageID 的元素，您必须考虑当前活动页面是什么，这在查看“下一个”活动页面时可能会很棘手。例如，当尝试处理中的某些内容时pageinit，jquery 不会将该页面作为活动页面返回。你可以做这样的事情来得到它。

$(':data(role="page")').live('pageinit', function () {
    var currentPage = $(this);
    ........
});

3 回答 3