jQuery mobile - Pagecontainer从DOM中消失

Question

在jQuery mobile中我想从外部文件加载pagecontainers。 我可以将标记添加到我的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 - 将页面拆分为不同的文件

Answer 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页面窗口小部件的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" />

Answer 2

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

在第1页：

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

在第2页：

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

这是我的交换机2页面的解决方案，不在同一个HTML中。

jQuery mobile - Pagecontainer从DOM中消失

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-08-14 07:47:04

更新

解决方案2
0 2014-08-14 06:48:16

jQuery mobile - Pagecontainer从DOM中消失

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-08-14 07:47:04

更新

解决方案2 0 2014-08-14 06:48:16

解决方案1
4 已采纳 2014-08-14 07:47:04

解决方案2
0 2014-08-14 06:48:16