単一の data-role="page" のみを使用する場合、これは正常に機能しますが、さらにページを追加すると、複数の data-role="page" を使用すると機能しなくなります。
<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 -->
これは問題なく動作しますが、ページの役割を持つ div をもう 1 つ追加すると
<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 -->
これは奇妙な動作のようです。助けてください。