jQueryを使っていた人が注意すべきこと
こんにちは。
今日は、jQueryを使っていた人が、jQueryMobileを使う時に注意すべきこと、です。
jQueryの場合は、ページ初期化時に動かしたいコードがある時は、以下のような感じで書きます。
$(document).ready(function(){ alert("DOM構築完了") });
これの類推で、各ページの初期化完了時に呼び出したい処理を書こうとして、こう言うコードを書こうとすると思います。
[indexページとhogeページがあると仮定しています。]
$(document).ready(function(){ $("#index").live("pageinit",function(){ alert("Hello, index page."); }); $("#hoge").live("pageinit",function(){ alert("Hello, hoge page."); }); });
これが、思わぬ動きをして、結構はまります。
最初に表示するページがindexだとすると、"Hello, index page."のalertは表示されません。また、最初に表示するページがhogeだとすると、今度は、"Hello, hoge page."のalertは表示されません。
つまり、こう言う現象です。
- indexページ、hogeページの順に遷移した場合、"Hello, hoge page."のみが表示される。
- hogeページ、indexページの順に遷移した場合、"Hello, index page."のみが表示される。
どの順に遷移しても、両方出すには、ready()の中でバインドするのではなくて、こうします。
$("#index").live("pageinit",function(){ alert("Hello, index page."); }); $("#hoge").live("pageinit",function(){ alert("Hello, hoge page."); });
初期化時にやったつもりのことが出来てなくて困ったら、疑ってみると良いでしょう。私の場合、気付くのに結構時間が掛かりました…。
因みに、pageinitは、初期化時に一度だけ実行されます。表示の度に何かしたい時は、pageshowなどのページ切換えイベントを使います。
$("#index").live("pageshow",function(){ alert("Hello, index page."); }); $("#hoge").live("pageshow",function(){ alert("Hello, hoge page."); });
ページ切換えイベントは幾つかあります。
イベント | 発生するページ | タイミング |
---|---|---|
pagebeforehide | 遷移前ページ | アニメーション実行前 |
pagehide | 遷移前ページ | アニメーション実行後 |
pagebeforeshow | 遷移後ページ | アニメーション実行前 |
pageshow | 遷移後ページ | アニメーション実行後 |
です。
ready()ではなくて、pageinitを使え、と言う教訓は、本家にも書いてあります。何度も目にしていたはずなのですが、見逃していました。ドキュメントはちゃんと読みましょうね。
#何故か、表組みが上手く表示されません…。
中の人Bでした。