在 jQuery Mobile 中显示对话框时页面从 DOM 中删除
Posted
技术标签:
【中文标题】在 jQuery Mobile 中显示对话框时页面从 DOM 中删除【英文标题】：Page removes from DOM when showing a dialog in jQuery Mobile 【发布时间】：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？
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于在 jQuery Mobile 中显示对话框时页面从 DOM 中删除的主要内容，如果未能解决你的问题，请参考以下文章