jQueryMobileナビゲーションのページイベントを理解しようとしていますが、一部のイベントハンドラーが数回呼び出されるため、非常に奇妙な動作が見つかりました。
home.htmlとdisclaimer.htmlの2つのページがあります。どちらにも同じヘッダーが含まれています。
<head>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/events.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
ページのhome.htmlには次のリンクがあります。
<section data-role="page" id="home">
<a href="#" id="test">Test</a>
</section>
そして、ファイルevents.jsには次のコードがあります。
var i = 0;
$(document).on('pageinit', 'section#home', function(event) {
console.log(i++, 'pageinit');
$('a#test').on('click', function() {
console.log(i++, 'click pageinit');
});
});
$(document).on('pagebeforeshow', 'section#home', function(event) {
console.log(i++, 'pagebeforeshow');
$('a#test').on('click', function() {
console.log(i++, 'click pagebeforeshow');
});
});
次に、次の手順を実行します。
- home.html（http）に移動します
- リンクをクリックしてください
- disclaimer.html（ajax）に移動します
- home.html（ajax）に移動します
- リンクをクリックしてください
次のコンソール出力を使用します。
0 "pageinit" // step 1
1 "pagebeforeshow"
2 "click pageinit" // step 2
3 "click pagebeforeshow"
4 "pagebeforeshow" // step 4
5 "click pageinit" // step 5
6 "click pagebeforeshow"
7 "click pagebeforeshow"
理にかなっていますよね？しかし、今では奇妙な部分です。ページにアクセスする順序を変更すると、動作が変わります。
- disclaimer.html（http）に移動します
- home.html（ajax）に移動します
- リンクをクリックしてください
- disclaimer.html（ajax）に移動します
- home.html（ajax）に移動します
- リンクをクリックしてください
コンソール出力：
0 "pageinit" // step 2
1 "pagebeforeshow"
2 "click pageinit" // step 3
3 "click pagebeforeshow"
4 "pageinit" // step 5
5 "pagebeforeshow"
6 "click pageinit" // step 6
7 "click pagebeforeshow"
これは奇妙なことです。6番目と7番目の結果が重複していると予想されるからです。
非常に長い質問でごめんなさい。誰かが私に何が起こっているのかを正確に説明してくれることを願っています。これが予想される動作であるかどうか。
tldr; jQueryMobileのイベントをどこでリッスン（クリック）しますか？