jQueryMobileでは$(function(){});ではなくpageinitとpageshowを使い分けるべき

jQueryMobileでは$(function(){});ではなくpageinitとpageshowを使い分けるべき
LINEで送る
Pocket

こんにちは。 jQueryMobileの1.2でwebアプリの開発を行なっているときに、 独自のJavaScriptを書く必要があったので、jQueryのように

という風に書けばいいのかと思ったら、見事にハマったので対応策をメモします。

jQueryMobileのページ初期化について

ページ初期化以外の説明についてはこのエントリでは省略します。

重要:$(document).ready()ではなく pageinit() を使う jQueryを学んで最初に覚えることは、コードを $(document).ready() に記述することでしょう。DOMが読み込まれ使用可能になると、この関数は真っ先に呼ばれます。しかしながらjQuery Mobileにおいては、Ajaxによって各ページが読み込まれてコンテンツがDOMに追加されます。そのため、DOMの ready ハンドラはサイトの最初のページを開いた時にしか呼ばれません。新しいページが読み込まれた際に毎回実行したい場合、その処理は pageinit イベントにバインドしてください。
イベント | jQuery Mobile 1.1.0 日本語リファレンス

とあるように、jQueryMobileでは$(function(){});ではなく、 pageinitというハンドラで制御します。

pageinitのサンプル

pageinitを使ったコードはこのようになります。 なお、jQueryのバージョンは1.8.2となっています。

#selectorの部分は、data-role="page"に対応するidです。適宜変更して下さい。

これで行けるぜやったー!と思っていたら、もう一つ罠が潜んでいました。 pageinitの中で、 ページが表示されるたびAjaxでリクエストを飛ばし、最新のデータを取得する という処理を書いていたのですが、2回目以降の表示でAjaxが動いていません。 pageinitについて調べてみると、 pageinitは私の意図どおりの挙動をしていないことが分かりました。

pageinitとpageshowイベント

ページ表示時に発火するpageshowイベントやページのイニシャライズで1回だけ発生するpageinitイベントなど、ページ関連のイベントをうまく使ってください。
そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか – へっぽこプログラマーの日記

こちらの記事にあるように、 pageinitイベントはページが最初に表示された時(=1回目)しか発生しません。 ページが表示されるたびに実行したいスクリプトは、pageshowイベントを捕まえれば良いようです。 イベント名で気づけよ・・・! 集中を切らしていました。早速修正します

pageinitとpageshowを使い分ける

pageinitとpageshowを使い分けたサンプルが以下となります。

例えば、 pageinitはスライドショーなどで使うHTMLの挿入(1回だけ必要)などに使い、 pageshowはGoogleAnalyticsの読み込みや、要素の座標等の調整(表示のたびに必要)などと使い分けることができるかな、と思います。 これで、目的の動作を達成できました。 初歩的なハマり方ですみません。。。

LINEで送る
Pocket