jQuery mobile - 页面容器从 DOM 中消失答案

【问题标题】：jQuery mobile - Pagecontainer disappears from DOMjQuery mobile - 页面容器从 DOM 中消失
【发布时间】：2014-10-07 17:24:35
【问题描述】：

在 jQuery mobile 中，我想从外部文件加载页面容器。我可以将标记添加到我的 DOM，但之后我面临的问题是，一旦我导航到 #page2，整个 #page1-div 就会从 DOM 中消失，因此我无法返回（请参阅下面的屏幕截图）。

点击“转到第 2 页”之前的 DOM

点击“转到第 2 页”后的 DOM

如您所见，整个#page1-div 已经一去不复返了。这是为什么？有什么想法吗？请在下面查看我的标记和代码：

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <title>Hello jqm</title>
    </head>
    <body>  
      <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

      <script> 
        $(document).ready(function(){   
          $(document).on( "pagecontainerload", function( event, ui ) {
            console.log('navigating to page1...');
            $.mobile.pageContainer.pagecontainer("change", "#page1");
            console.log('navigating done!');          
          } );

          console.log('loading pagecontainers...');
          $.mobile.pageContainer.pagecontainer("load", "page1.html");
          $.mobile.pageContainer.pagecontainer("load", "page2.html");
          console.log('pagecontainer-load done!');
        });
      </script>    
    </body>
</html>

page1.html

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>

page2.html

<div data-role="page" id="page2" class="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

备注：这是对该问题的后续问题：jQuery mobile - Splitting up pages to different files

【问题讨论】：

您介意创建一个小提琴以便更好地理解吗？
我很乐意，但 jsfiddle 似乎不适用于这些导入（至少在我的保管箱中公开托管 page1.html 和 page2.html 时我无法让它工作）。但是，我将上面标记中的所有外部链接都替换为链接公共 cdns，因此您只需将代码复制并粘贴到硬盘上的三个本地文件中，然后打开 test.html 即可在浏览器中查看结果。

标签： javascript jquery html jquery-mobile dom

【解决方案1】：

当您离开外部页面时，jQuery Mobile 会移除它们。您应该将基本页面缓存在 DOM 中，而不是加载所有页面。

方案一：在test.html中，添加page1.html的html标记，并在外部加载page2.html。
解决方案二：将data-dom-cache="true" 添加到 page1 div 以保持缓存，即使它是从外部加载的。
```
  <div data-role="page" id="page1" data-dom-cache="true">
```

更新

您可以一次缓存所有外部页面，而无需在每个页面 div 中添加 data-dom-cache。您需要做的就是在mobileinit 事件上将页面小部件的domCache 选项全局设置为true。代码应该放在 jQuery.js 之后，jQuery-Mobile.js 之前。

<script src="jquery.js" />
<script>
   $(document).on("mobileinit", function () {
      $.mobile.page.prototype.options.domCache = true;
   });
</script>
<script src="jquery-mobile.js" />

【讨论】：

老兄，你是救命稻草！谢谢，这有效！在每一页上使用data-dom-cache="true" 有什么缺点吗？我的应用中有四五个？
不客气 :) 您不必全部缓存它们。只有基页，以防它不是静态的。
@Christian 检查更新的答案，您不需要将data-dom-cache 添加到所有页面。
我也试试！泰！

【解决方案2】：

对于这种情况，您应该尝试手动初始化页面

在第 1 页：

$(document).bind("mobileinit", function () {
    ...
    $.mobile.autoInitializePage = false;
    $.mobile.initializePage();
});

在第 2 页中：

$(function () {
    $.mobile.activePage = null;
    $.mobile.initializePage();
});

这是我在不同 HTML 中切换 2 页面的解决方案。

【讨论】：

仍然是同样的问题...我将您给我的代码放在每个文件（page1.html 和 page2.html）内的