jquery mobileのページ初期化イベントを発行するpageinit。これは単にjqueryのreadyに相当するのかと思っていたのですが、どうやらそうではない様子。
jquery mobileの公式ページによるとreadyとpageinitについてこんな記述があります。
Important: Use $(document).bind('pageinit'), not $(document).ready()The first thing you learn in jQuery is to call code inside the $(document).ready()function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
なので、安直にjqueryで$(document).ready()としていたところを$(document).bind('pageinit')とすればいいのかと思ってましたが、やってみるとそれではうまくいきません。たとえばclickイベントをbindする処理。
pageinitイベントは<div data-role='page'>で指定したページが初期化されるときに呼ばれるので、$(document).bind('pageinit')にしてしまうと、初めてページ遷移するときに必ず呼ばれてしまいます。
例えば次のようにページを２つ遷移させたあとにあるlabelにclickイベントをbindする処理では、labelを開くまでに3回bindが実行されてしまうので、labelをclickした時に3回分だけalertが実行されることになります。
<script type="text/javascript">
$(document).bind('pageinit',function() {
$('label').live("click",
function(){
alert("clicked!");
}
);
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="page1">
<div data-role="content" id="page_word_list_content">
<a href="#page2">to page2<a>
</div>
</div>
<div data-role="page" data-theme="b" id="page2">
<div data-role="content" id="page_word_list_content">
<a href="#page3">to page3</a>
</div>
</div>
<div data-role="page" data-theme="b" id="page3">
<div data-role="content" id="page_word_list_content">
<label>click me!
</div>
</div>
</body>
なので、pageinitイベントはあくまでもdata-role="page"の初期化相当に限り、イベントハンドラの登録処理などは相変わらず$(document).readyを利用して記述するのがよさそうです。
まあ考えてみれば当たり前なんですが、公式のドキュメントで
なんて言われちゃうとreadyイベント自体を使っちゃいけないのかな、なんて気になっちゃいますよね。
まあ考えてみれば当たり前なんですが、公式のドキュメントで
Important: Use $(document).bind('pageinit'), not $(document).ready()
なんて言われちゃうとreadyイベント自体を使っちゃいけないのかな、なんて気になっちゃいますよね。
