第一次做用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