2012-03-03 67 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