【新手向】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