私が作っているアプリにはリストビューがあり、リストビュー項目をクリックすると新しいページが開き、情報が表示されます。
リストビュー項目を最初にクリックすると、ページは問題なく適切に開きます。戻るボタンをクリックして別のリストビュー項目をクリックすると、ページが読み込まれますが、JQM スタイルはまったくありません。
以下のコードを使用して上記の問題を解決できましたが、ページが 2 回目に読み込まれ、スタイル設定されていないページが表示され、画面が点滅し、適切に読み込まれます。pageshow イベントで画面をリロードせずに同じ最終結果を得るにはどうすればよいですか。
ページをリロードするコード:
$("#moduleinfo").live('pageshow', function() {
$('#infoPara').trigger("create");
});
クリックされたリストビュー項目に応じてページを作成するコード
var output = "Module Code: " + results.rows.item(0).module +
"<br/>Room No: " + results.rows.item(0).room +
"<br/>URL:" + results.rows.item(0).url +
"<b/r><a href='#' data-role='button' data-theme='d' onclick='openURL(\""
+ results.rows.item(0).url + "\")'>Open URL</a>" +
"</br><a href='#' data-role='button' onclick='deleteEntry(\""
+ results.rows.item(0).id + "\")'>Delete Entry</a>";
$('#infoPara').html(output);
$.mobile.changePage( "index.html#moduleinfo", { transition: "slide"} );
ページの HTML
<div data-role="primary-content" id="modinfo">
<p id="infoPara"></p>
</div>
私の問題がこの質問に関連していることはかなり確信しています:
「pageshow」イベントハンドラーでjQueryモバイルマジックを機能させるにはどうすればよいですか? (JQM1.1.0)
ありがとう!