【新手向】jQuery mobile 跳起色制問題及其解決方法

第一次作用jQuery Mobile作東西，發現一些跟平時的思惟習慣不太同樣的。其中這個框架的頁面加載機制即是其中一個。若是不明白其中的奧祕，每每會出現一些讓人摸不着頭 腦的怪現象，好比頁面進入後點擊按鈕後Javascript就是不執行，而用F5刷新頁面後又能夠正常執行等。

即便咱們明白了HTML文件與jQuery Mobile中page概念的區別，也仍是不能解決上述問題。固然，瞭解這個是一個大前提。原來，jQuery Mobile是用Ajax的方式加載全部HTML中的標記data-role="page"的DIV元素中，第一個HTML頁面通常都是徹底加載，包括 HEAD 和BODY 都會被加載到DOM中，完成後即是連接到的其餘頁面內容的加載。 第二個HTML頁面只有 BODY 中的內容會被以Ajax的方式加載到頭一個HTML的 DOM中。 而且第二HTML頁面的 BODY 中的內容也並不是所有加載，而僅僅是其中的第一個帶data-role="page"屬性的DIV會被加載進去，其他的東西則無緣進入頁面渲染。

能夠用如下方法來解決：
一是在index頁面中，註冊全部須要使用到的外部JS文件，或者使用母版頁面來統一；
二是將頁面內部JS寫在data-role="page"標籤下，這樣不管頁面怎樣跳轉，都可以運行。
三是用jqm頁面事件pageshow（）：#pagetwo是有返回去的那個頁面的id。

$(document).on("pageshow","#pagetwo",function(){
  alert("寫上你要調用的js代碼在這裏");
});

資料來源：http://stackoverflow.com/questions/17403825/link-fails-to-work-unless-refreshing/17403907#17403907