Jquery search-form not working in phonegap

Question

This works fine if i use only single data-role="page" but if I add more pages I mean with more than one data-role="page" it stop working.

<div id="studentpage" data-role="page">
<div data-role="header" data-theme="b">
<h1>Search inputs</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse"   class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<p>The search input is displayed like this:</p>
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" />
</div>
<p>Themed variation:</p>
<div data-role="fieldcontain">
<label for="searchA">Search Input:</label>
<input type="search" name="searchA" id="searchA" value="" data-theme="a" />
</div></form>
</div><!-- /content -->
</div><!-- /page -->

This works fine but if I add one more div with page role

<div id="otherpage" data-role="page">
My second page
</div>

<div id="studentpage" data-role="page">
<div data-role="header" data-theme="b">
<h1>Search inputs</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<p>The search input is displayed like this:</p>
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" />
</div>

<p>Themed variation:</p>
<div data-role="fieldcontain">
<label for="searchA">Search Input:</label>
<input type="search" name="searchA" id="searchA" value="" data-theme="a" />
</div>

</form>
</div><!-- /content -->
</div><!-- /page -->

This seems strange behavior, Please help.

Answer 1

I was using hide show to switch page so it was not working so replaced with jquery method $.mobile.changePage("#studentpage") now working perfect