jQueryMobileの注意点

jQueryMobileのイベント定義の注意点

2ページ以降はhead要素のscriptが実行されない
これは、jQueryMobileは、2画面目以降のDOMは
AjaxでHTMLを取得し
画面をレンダリングしている
このとき、data-role=”page”で定義された要素以外は無視するため
2画面目以降のhead要素は読み込まれない

このため、1画面目に読み込ませるページで
Javascriptを読み込ませる

jQueryMobileでは、

<div data-role="page">

</div>

の間で管理しているので
普通のHTMLと同じように考えると
表示されないことがあるので注意

次の注意点として、セレクタで指定したイベントが、複数のページで動作することがあるということ
これは、data-role=”page”ごとで管理しているけど
id とかクラスが同じところがあると
識別がされず実行されてしまう
対策としては、被らないようにユニークなもので id=”” class=”” の中身を指定すること

そして、イベントの書き方がたくさんありすぎること
自由なのはいいけど、自由すぎてバグになりやすい

例えば、ボタンを押したらhelloと表示することさえ5つのやり方がある

その1

$(document).on("pageinit","#text",function(e){
$(this).on("click","#btn",function(e){
alert("hello");
});
});

その2

$(document).on("pageinit","#text",function(e){
$(e.target).on("click","#btn",function(e){
alert("hello");
});
});

その3

$(document).on("pageinit","#text",function(e){
$("#text #btn").on("click",function(e){
alert("hello");
});
});

その4

$(document).on("pageinit","#text",function(e){
$("#text").on("click","#btn",function(e){
alert("hello");
});
});

その5

$(document).on("click","#text #btn",function(e){
alert("hello");
});

このように、いくつかやり方はあるため
自分なりのルールを決めておくとわかりやすいしバグの防止にもなる