問題対処のための自分なりのルールを作っておくとバグが減る
なお、ルールは書籍やサイトなどを参考に後々変更していく予定
対処ルールその1
画面遷移を利用するとき、別の画面に同じidがあってもイベントが設定されないようにする
このためには、以下のような書き方をする
$(document).on("pageinit","#text",function(e){
$(this).on("click","#btn",function(e){
alert("hello");
});
});
この書き方をする理由は
pageinitイベントの中でイベント定義することで
画面に対するイベントをまとめて定義できるから
これは、ある画面に対するイベント定義を書いた場所が分散すると、コードがわかりにくくなるから
また、thisによるデリゲードを使うことで
この画面にイベントを追加しているのがわかりやすくなる
ちなみに、デリゲードとは
要素の子要素の中のセレクタにマッチする要素にイベントを追加すること
対処ルールその2
ready()を使わない
jQueryMobileを使うときに
ready()は、基本的に最初に画面を読み込んだときしか実行されない
このため、ready()ではなく pageinitイベントを使うことで初期化処理を書く
対処ルール3
すべてのイベント定義は1つのJavascriptファイルへまとめる
理由は、jQueryMobileは
2画面目以降のhead要素内のscript要素を実行しないから
このため、最初の画面で、全画面分のイベント定義をしておく
これをevent.jsとか
custom.jsとかにして読み込んでおく