如何更改jQuery Mobile中的頁面？

Question

我的代碼是這樣的：

<div data-role="page" id="LoginPage"> 

    <div data-role="header"> 

    </div> 

    <div data-role="main" class="ui-content"> 
    <input type="button" value="התחבר" onclick="checkDetails()" /> 
    </div> 

    <div data-role="footer"> 

    </div> 
</div> 

現在，通過功能checkDetail（）我需要移動到anthor頁面（如下圖）

<div data-role="page" id="HomePage"> 

    <div data-role="header"> 
     <h3>asd</h3> 
    </div> 

    <div data-role="content" class="ui-content"> 

    </div> 

    <div data-role="footer"> 
     <ul> 
      <li><a>a</a></li> 
      <li><a>as</a></li> 
      <li><a>asd</a></li> 
     </ul> 
    </div> 
</div> 

的問題是，當我移動到它，我達到主頁，但它顯示爲一個正常的HTML頁面而不是jQuery的手機。 順便說一句，LoginPage顯示爲jQueryMobile，但HomePage不是。

這就是我的移動，

$('#LoginPage').hide(function() { 
    $('#HomePage').show(); 
}); 

Answer 1

你不應該使用jQuery核心庫的$.show()和$.hide()方法頁面導航。 jQuery Mobile中的頁面導航通過Pagecontainer Widget進行處理 - 具體使用change方法。

在你的榜樣，你會做以下幾點：

var homePage = $("#HomePage"); 
$.mobile.pageContainer.pagecontainer("change",homePage,{});