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でした。