jQuery mobileでのイベントなどについて

jQuery mobile でphonegapアプリ作成という案件をやってるが、
もちろん普通のhtml作成とは異なるわけで。
注意すべき点というのはいくつもあるけれども、
とりあえずはイベント関連の扱いがかなりやっかいになってくる。

特にjQuery mobileはAjaxで遷移先のhtmlを引っ張って、
現在見ているページのbody内に引っ張ってきたデータを入れてくるので、
引っ張ってきたページ内に記述されているonloadイベントや、
readyイベントなどを実行する事は出来ない。

実際にこれらの対策として色々とイベントが用意されているので、下記を参照。

■window.onloadや$(document).ready()をどう記述するべきか？
基本的にreadyやonloadというのはDOMの制御が出来るようになったときのイベントであり、
$("#hoge").css()などで色々と編集したり、操作したりする事が出来るようになる。
もちろんreadyで処理をしてもよいが、上述したようにAjaxでデータを取ってくるので、
引っ張ってきたページを開いたときにこれらのイベントは処理されない。
ということでそうしたかったら下記のように記述すればよい。

//$(document).ready(function(e){
//  様々な処理の記述
//});

//live関数でpageshowイベントを付与
$("#top").live("pageshow",function(e){
  //  様々な処理の記述
});

指定したエレメント(#top)を開いたときのイベントという形になる。
なので#top→#page1→#topと戻ってきた場合でも、#topでしっかりとイベントが実行される。

ちなみにiScrollを使っている際は、ページ遷移をして元のページに戻ってきたら作動しないとかあるので、
毎回ちゃんと作動させるためにpageshow内にnew iScroll()を記述しないと意味がない。