2012-03-03 81 views
2

我正在尝试在jQuery Mobile中浏览页面,并且遇到动态创建的页面和ajax加载的页面。在jQuery Mobile中覆盖的页面

我有一个页面(page_2),从该余动态使用page3.appendTo($.mobile.pageContainer);然后$.mobile.changePage(page3);创建页面(page_3)。它工作正常,我可以通过做$.mobile.changePage($("#page_2"));回到page_2。到现在为止还挺好。

问题是当我从page_2登陆另一页(例如page_1)。在这种情况下,由于某种原因,page_2$.mobile.pageContainer中消失,当我创建page_3(而page_1仍然存在)时。它阻止我从新创建的页面返回到技术上属于的page_2

任何想法为什么?有什么办法可以防止page_2被移除?

,您可以尝试在那里:page_1page_2

简而言之:
page_1 -> page_2工作
page_1 -> page_2 -> page_3工作
page_1 -> page_2 -> page_3 -> page_2失败
page_2 -> page_3 -> page_2 -> page_3作品(你喜欢的许多循环)

非常感谢你的帮助!

回答

1

您可以设置data-dom-cache属性true<div data-role="page" id="page_2">元件(第二页),因此一旦它从导航远不会被删除:

<div data-dom-cache="true" data-role="page" id="page_2"> 
    ... 
</div> 

Docs:http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/data-attributes.html

jQuery Mobile的默认行为是在用户离开它后离开由AJAX引入的DOM的任何伪页。因此,当您链接到远程文档时,请使用指向文档URL的绝对链接,而不要使用它的ID为<div data-role="page">的元素。

你动态地创建了三个页面使用该导航回到第二页:

$.mobile.changePage($("#page_2")); 

它可以改变为:

$.mobile.changePage('/page_2.html'); 

如果您链接到这样的页面,它们将会被默认在离开DOM后从DOM中删除,这个想法是,如果DOM中的页面最少,那么您不太可能会使移动设备的浏览器崩溃。也有可能只是从缓存中拉出页面,所以在这种情况下没有HTTP请求。

+0

谢谢,它使我很有意义并修复了我的问题。我会小心使用data-dom-cache,但它会带来巨大的帮助。我的网站是围绕需要大量数据传输的页面和正在显示数据的页面组织的。为了避免重做数据传输,我尝试了后者的动态,但jQuery mobile并不是那么自然。 – 2012-03-04 15:32:32

1

我建议使用JQM事件这样的:

$("#page3link").click(function (e) { 
    e.stopImmediatePropagation(); 
    e.preventDefault(); 
    createPage3(); 
    return false; 
}); 

你需要做同样的返回按钮2链接或者你可以只是简单地把和H REF =“#第2页”

+0

感谢您的回复。贾斯珀的回答解决了我的问题,现在我很了解逻辑。我会在以后保存jqm事件;) – 2012-03-04 15:33:40