jquery mobile js失效原理与解决

jquery mobile 转场JS失效

作者：admin 时间：2013-01-05 标签：JS/jQuery

 

 

文章摘要： 最近在使用jQuery mobile时遇到一个很纠结的问题，比如在A页面有一个链接，链到B页面，当页面到达B页面的时候，D页面的JS无效，得刷新一次才有效果，在网上查知这与JQM的工作原理有关，JQM只加载页面PAGE内容，但是更纠结的是参照网上无数方法，依然无用，最后意外找到了一个不是办法的办法。这个办法就是…

最近在使用jQuery mobile时遇到一个很纠结的问题，比如在A页面有一个链接，链到B页面，当页面到达B页面的时候，D页面的JS无效，得刷新一次才有效果，在网上查知这与JQM的工作原理有关，JQM只加载页面PAGE内容，但是更纠结的是参照网上无数方法，依然无用，最后意外找到了一个不是办法的办法。

这个办法就是在a标签上加上 target="_top"，使用这个方法后，JS有效，但有得必有失啊，使用这个方法的缺点是JQM原生提供的转场效果不再有效。

不管了，先凑合着用吧。

必须记录下这一刻,上面介绍的方法已经可以抛弃了。

今天又在网上苦寻了很久，什么 $(document).bind('pageinit')，$(document).bind('pagecreate')，在我这里统统不起作用，最终在一个小角落里发现了一个很巧妙的解决方案，如下：

jQuery Mobile工作原理：

为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面的page内容，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数。

从上面我们可以看出，如果把JS写在PAGE里面的话，那么不管在哪个页面，很可以很好的实现相应的JS。