使用jQuery Mobile隐藏和显示div

Question

Well, this is the first time i'm using jquery mobile. I'm trying to make a single page mobile app and i have two divs like follows:

<div data-role="page" id="divStart">
        <div data-role="content">
            <a id='btnShowSignUp' data-role="button" href='#' onclick="ShowSignUp();">Sign Up</a>
            <a id='btnShowSignUp' data-role="button" href='#' onclick="ShowLogin();">Login</a>
        </div>
</div>
<div data-role="page" id="divSignUp" style='display: none'>
        <div data-role="content">
            <form id='formSignUp' method='POST'>
                <div data-role="fieldcontain">
                    <label for="name">Name</label>
                    <input name="name" id="name" type="text">
                    <label for="email">E-mail</label>
                    <input name="email" id="email" type="text">
                    <label for="pass">Pass</label>
                    <input name="pass" id="pass" type="password">
                </div>
                <a data-role="button" href="#" onclick='SignUp();'>Save</a>
            </form>
        </div>
</div>

When i click the button 'btnShowSignUp', i call the function:

function ShowSignUp(){
    $('#divStart').hide();
    $('#divSignUp').show();
}

My problem: when i click the button, the 'divStart' disappear and the 'divSignUp' shows up, but it misses some of its jquery mobile attributes. Why is this happening?

Thanks!

Answer 1

You aren't following JQM's navigation API. The JQM framework manages the showing and hiding of your various "pages", along with applying any transition between them:

 function ShowSignUp(){
   $.mobile.changePage( "#divStart" );
 }

With a fancy transition:

 $.mobile.changePage( "#divStart", { transition: "pop" });

If you try doing JQM's job for it, you're likely going to end up with unanticipated results.

http://api.jquerymobile.com/jQuery.mobile.changePage/