How to change pages in jQuery Mobile? [duplicate]

问题

This question already has answers here:

How to change page in jQuery mobile (1.4 beta)? (2 answers)

Closed 2 years ago.

my code is like this :

<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>

now, by the function checkDetail() i need to move to anthor page(below)

<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>

the problem is when i move to it, i reach to HomePage but it shown as a normal html page not a jquery mobile. By the way, LoginPage shown as jQueryMobile, but HomePage isn't.

That's how i move,

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

回答1:

You should not use the $.show() and $.hide() methods from the core jQuery library for page navigation. Page navigation in jQuery Mobile is handled through the Pagecontainer Widget -- specifically using change method.

In your example, you would do the following:

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

来源：https://stackoverflow.com/questions/43242743/how-to-change-pages-in-jquery-mobile