如何在 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,{});