2 つの Jquery Mobile ページを含む HTML ファイルがあります。
<!-- Home Page -->
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<h1>FortiSizer</h1>
</div>
<div data-role="content">
<div id="myForm"></div>
<a id="sizeit" data-role="button" data-theme="a" data-inline="false">Size It</a>
<script type="text/javascript">
jQuery("#home").on('pageinit', function(event, data) {
jQuery("#sizeit").on("click",function(e){
sizeItClick();
return false;
});
});
</script>
</div>
</div>
<!-- Product Page -->
<div data-role="page" id="productInfo">
<div data-theme="a" data-role="header">
<a id="back" data-role="button" data-inline="true" data-direction="reverse" data-rel="back" data-transition="slide" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a>
<h1 id="productName"></h1>
</div>
<div data-role="content">
<div id="detail"></div>
</div>
</div>
head セクションには、次のコードがあります
<script type="text/javascript">
jQuery(document).on('pagecreate', function(event, data) {
generatePageForm();
});
</script>
これにより、ホームページにフォームが生成されます。主なアイデアは、ユーザーが選択要素からモデルを選択すると、製品の詳細 (製品ページ) を表示することです。それはすべてうまくいきます、2回!
フォームが生成され、[sizeIt] ボタンをクリックすると、製品の詳細ページが読み込まれ、そのページの [戻る] ボタンをクリックして、ホームページに戻ります。しかし、これを 3 回目に行うと、sizeit ボタンが機能しなくなり、製品ページが表示されなくなります。私は何を間違っていますか?