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

Question

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

然后我使用以下链接<a href="#dialog-1" data-role="button" data-rel="dialog">Open Dialog</a> ： <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？

Answer 1

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

如果要仅对#Survey2页面#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;