在 jQuery Mobile 中显示对话框时页面从 DOM 中删除答案

【问题标题】：Page removes from DOM when showing a dialog in jQuery Mobile在 jQuery Mobile 中显示对话框时页面从 DOM 中删除
【发布时间】：2012-08-27 08:30:52
【问题描述】：

我有一个页面，其中包含一个<div data-role="page" ... 和一个<div data-role="dialog" id="dialog-1" ...

然后我用这个链接打开对话框：<a href="#dialog-1" data-role="button" data-rel="dialog">Open Dialog</a>

但是，主page 中也有一些链接。例如，这是我的 index.html：

...
<body>
<div data-role="page" id="Survey">              
    <div data-role="content">
        <a href="page2.html" data-role="button" data-transition="slide">Go to the next page</a>
        <a href="#dialog-1" data-role="button"  data-rel="dialog">Open Dialog</a>
    </div><!-- /content -->      
</div><!-- /page -->  
<div data-role="dialog" id="dialog-1">              
    <div data-role="content">
        Welcome!
    </div><!-- /content -->      
</div><!-- /dialog-->  
</body>
</html>

这是我的 page2.html ：

...
<body>
<div data-role="page" id="Survey2">              
    <div data-role="content">
        <a href="#dialog-1" data-role="button"  data-rel="dialog">Also you can open the dialog here</a>
    </div><!-- /content -->      
</div><!-- /page -->  

</body>
</html>

但这就是问题所在：我打开 index.html，然后单击链接转到带有 jQuery mobile 的 Ajax Navigation 功能的 page2.html，然后单击链接Also you can open the dialog here。通过单击此链接，Survey2 页面从 DOM 中删除。当我关闭对话框时，一个新的 page2.html 下载并位于 DOM 中。

但是，如何防止在对话框打开时从 DOM 中删除 page2.html？

【问题讨论】：

标签： jquery dom jquery-mobile

【解决方案1】：

查看此文档： http://jquerymobile.com/test/docs/pages/page-cache.html

如果您只想对 #Survey2 页面禁用对 pagehide 的删除，您可以将属性 data-dom-cache="true" 添加到此页面：

<div data-role="page" id="Survey2" data-dom-cache="true">              
    <!-- [...] -->      
</div><!-- /page -->

如果你想保留所有通过 ajax 注入的页面，你可以全局启用：

jQuery.mobile.page.prototype.options.domCache = true;

【讨论】：