jquery mobile中的多頁面模板

Question

我使用多頁面模板創建我的頁面，我讀到只有起始頁面（例如index.aspx）在加載時仍然保留在每個頁面的Dom中。但現在在我的其他頁面（例如child.aspx）是頁面parent.aspx的子節點，我可以看到parent.aspx頁面的dom元素。 麪包屑如下：Index ---> parent ---> child，也許我應該只看到索引dom內容不是父項。這讓我覺得奇怪，爲什麼網頁是這樣，我該如何處理it.Thanks

更新：

我只想重新加載每一次放映的每一頁，我的意思是清除DOM完全從加載內容開始。就像當你按下ctrl + f5並加載沒有緩存的頁面一樣。這可能在JQM中嗎？

的Index.aspx：

<form id="form1" runat="server" dir="rtl"> 
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode = "Conditional"> 
      <ContentTemplate> 
     <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager> 
     <uc2:MblMyMessageBox ID="MblMyMessageBoxInfo" runat="server" ShowCloseButton="true" /> 
    <div data-role="page" id="home"> 
     <div data-role="header"> 
      <h1>header</h1> 
     </div> 
     <div data-role="content"> 
      <ul data-role="listview" data-inset="true" data-filter="false"> 
       <li data-icon="false"><a href="AccountStatus.aspx">AccountStatus</a></li> 
       <li data-icon="false"><a href="ConfirmPayment.aspx">ConfirmPayment</a></li> 
      </ul> 
     </div> 
    </div> 
      </ContentTemplate> 
    </asp:UpdatePanel> 
</form> 

AccountStatus.aspx：從accountStatus頁面的DOM元素指標的

<div data-role="page" id="accountStatus"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-filter="false"> 
      <li data-icon="false"><a href="BalancePage.aspx" data-prefetch="true">balance</a></li> 
      <li data-icon="false"><a href="InvoicePage.aspx">invoice</a></li> 
     </ul>   
    </div><!-- /content --> 
    <div data-role="footer"> 
     <p><a href="Index.aspx">back</a></p> 
    </div><!-- /footer --> 
</div><!-- /page --> 

刪除內容就是我的目的。

Answer 1

用戶導航到的所有頁面都將被添加到dom中。見the documentation。然而，jQM也有a mechanism來防止DOM變得很大並且放慢瀏覽器速度。它可能會也可能不會從DOM中刪除舊的元素。 我建議你不要信任DOM元素自動刪除。如果你真的要刪除您從導航離開頁面，您可以綁定例如以下：

$(document).one("pageshow",function(){ 
    $(document).one("pagehide",function(){ 
      $("#pageId").remove(); 
    }); 
}); 

pageid是給了<div data-role="page" id="pageId">的ID。下面的鏈接時， 要重新加載整個頁面：

編輯的更新問題

鏈接指向其他領域或有相對=「外部」， 數據的Ajax =「假」或目標屬性不會用Ajax加載。 相反，這些鏈接將導致整個頁面刷新，而沒有動畫 轉換。

來源：jQuery Mobile Docs

或者你可以用following global variable改變：

$.mobile.ajaxEnabled = false;