jQueryMobileのイベント処理
$(#mybutton).on("click",function(e){
alert("スイッチオン!");
});
これだと
イベントを追加する要素の読み込み完了後でないと
イベント追加ができない
このため、追加したいイベントの前に
イベント追加scriptを書くと
正しく動作しない
このため、イベント追加したい要素の後へscriptを書くことになる
これが静的、つまりあらかじめ書いておくやり方
次に、動的、つまりプログラミングによる制御でイベント追加するやり方
これは、最初はHTMLに書かれてなくて
後から表示されるときに追加される
Twitter、Facebook、メール閲覧ソフトなどは
情報の更新で新しい情報表示しているのは
後から要素を追加している
あと、ほとんどの場合
JavascriptはHTMLのbodyの中じゃなくて
headの中へ書いている
こういった場合のイベント追加には
Javascriptの構文で
$(document).on(イベント名, セレクタ, ハンドラ)
となる
イベント名は、clickとかで
セレクタは対象のid
ハンドラは行う処理
例えば
<button id="save">保存</button>
このボタンへイベント追加するなら
$(document).on("click",""save",function(e){
//保存する処理
});
とする
この追加したイベントを削除するには
off()を使う
通常は、Webアプリならイベントを削除はやらない
これは、画面遷移すると、すべてのイベントがクリアされるから
しかし、jQueryMobileだと
デフォルト動作で最初に読み込まれた画面がAjaxで次々と別画面を読み込んで画面を切り替え表示してしまう
つまり
通常のwebアプリとは違い
jQueryMobileの場合は
イベントを削除しない限りずっと残る
ボタンやテキストボックスなどのイベントは
コンポーネント固有なのであまり影響ないけど
スクロールイベントとか
各種センサー、位置情報などは
必要のない画面へ遷移しても処理し続け
思わぬ動作をすることがある
このため、一度追加したイベントは
off()で削除する
構文は
$(window).off("イベント名")
イベントの削除は
画面遷移して、今の画面を離れるときに使うことが多い
$(document).on("追加したいイベント","追加対象のid",function(e){
$(window).off("削除するイベント");
});