私のシナリオは次のとおりです。組み込みシステムのユーザーインターフェイス用のWebアプリケーションを構築しています。私はjQuery Mobileの使用を計画しています。なぜなら、それは信じられないほど滑らかですからです。私はファイルパターンごとに1つのページを持っています。以下に示すprocessinputs.htmlというファイルがあります。それは、チャンネル番号を選択するクエリのparamでinput.htmlに移動するだけです。jQuery Mobile pageCreateがページリビジョンで起動しない
問題：私がprocessinputs.htmlからinputs.htmlに行くのは初めてですか？私は= 3すべてがうまくいきます。ヘッダーとリンクが変更されます。ただし、processinputs.htmlに戻って3番目の入力リンクを再度クリックしても、イベントは発生しないため、ヘッダーは更新されません。
これは、キャッシュされたページをロードするAJAXと関係があり、「pagecreate」イベントをトリガーしないと仮定しています。私も "pageinit"と "pagebeforecreate"を試みました。私のproject.jsファイルでは、私はdomCacheとajaxを無効にしようとしましたが、動作していないようです。 processinputs.htmlの入力1に「rel = external」をハードコードしていることがわかります。これは毎回動作しますが、実際にjQMobileはajaxの読み込みとアニメーションのためにとてもクールです。キャッシングを回避する方法を理解する手助けができたら、私は大いに義務づけられます。
$(document).bind("mobileinit", function(){
$.mobile.ajaxLinksEnabled=false;
$.mobile.ajaxFormsEnabled=false;
$.mobile.ajaxEnabled=false;
$.mobile.page.prototype.options.domCache = false;
}）;
今約束しprocessinputs.htmlため
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.min.js"></script>
<script src="js/project.js"></script>
<script src="js/jquery.mobile-1.0rc2.js"></script>
<meta name="viewport" content="width=default-width, initial-scale=1" />
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-cache="never">
<div data-role="header" data-position="inline">
<div class="topTitle">Process Inputs</div>
<a href="index.html" data-icon="home" class="jqm-home ui-btn-right ui-btn-corner-all ui-btn-down-f ui-btn-up-f" title="home">Home</a>
</div><!-- header -->
<div data-role="content">
<div class="instructionText">Select an input</div>
<div> <!-- Container around button options -->
<a href="input.html?i=1" data-role="button" rel='external'>Input 1</a>
<a href="input.html?i=2" data-role="button">Input 2</a>
<a href="input.html?i=3" data-role="button">Input 3</a>
<a href="input.html?i=4" data-role="button">Input 4</a>
<a href="input.html?i=5" data-role="button">Input 5</a>
<a href="input.html?i=6" data-role="button">Input 6</a>
<a href="input.html?i=7" data-role="button">Input 7</a>
<a href="input.html?i=8" data-role="button">Input 8</a>
</div>
</div><!-- /content -->
<div data-role="footer">
<div class="footerText">A Senior Design G13 Project</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
input.htmlは、クエリのparamを取り、input.htmlのヘッダと3つのリンクのクエリのparamを変更するためにそれを使用していますページ上にコードを以下に示します。各ページの
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.min.js"></script>
<script src="js/project.js"></script>
<script type="text/javascript">
$('.inputPage').live('pagecreate', function (event, ui) {
var inum = $.urlParam('i');
$('#inputTitle').text('Process Input ' + inum);
$('#eqLink').attr('href','eq.html?i=' + inum)
});
// $('div').live('pagehide', function(event, ui){
// var page = jQuery(event.target);
// if(page.attr('data-cache') == 'never'){
// page.remove();
// };
// });
</script>
<script src="js/jquery.mobile-1.0rc2.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-cache="never" class="inputPage">
<div data-role="header" data-position="inline">
<div class="topTitle" id="inputTitle"></div>
<a href="index.html" data-icon="home" class="jqm-home ui-btn-right ui-btn-corner-all ui-btn-down-f ui-btn-up-f" title="home">Home</a>
</div><!-- header -->
<div data-role="content">
<div class="instructionText">Select one.</div>
<div> <!-- Container around button options -->
<a href="eq.html?i=" id="eqLink" data-role="button">Equalization</a>
<a href="comp.html?i=2" id="compLink" data-role="button">Compression</a>
<a href="lim.html?i=3" id="limLink" data-role="button">Limiting</a>
</div>
</div><!-- /content -->
<div data-role="footer">
<div class="footerText">A Senior Design G13 Project</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
すべてのJavaScriptは、ルート・ページにする必要があります（index.htmlまたは最初に読み込むページ） –
素晴らしい！それがそれでした。私の良さ...単純なもの。 –
が –