jquery AJAX navigation特性

阅读更多

     刚开始用jquery mobile，做页面用起来也挺顺手，特别是导航特别炫，可以用动画，不过刚开始用发现了一个问题，就是jquery的代码在original page的时候是好使的，但是当导航到第二个页面的时候，jquery的所有方法，和第二个页面的css全部失效。查了一下，原来是jquery mobile有一个特性就是ajax导航，下面是从官方文档摘录下来的一段话：

      Whenever a link is clicked or a form is submitted, that event is automatically intercepted by the AJAX nav system and is used to issue a AJAX request based on the href or form action instead of reloading the page. While the framework waits for the AJAX response, a loader overlay is displayed.

      When the requested page loads, the jQuery Mobile parses the document for an element with the data-role="page" attribute and inserts that code into the DOM of the original page. Next, any widgets in the incoming page are enhanced to apply all the styles and behavior.The rest of the incoming page is discarded so any scripts, stylesheets or other information in the will not be included. 

 

      原来jquery mobile在页面之间导航的时候是使用ajax加载，然后将目标页面中的第一个data-role=“page”的第一个div元素设置到original page中，目标页面中的其余部分全部“抛弃”，也就是说写在标签中的script和style全部失效。从stackoverflow上找到了解决方法：用jquery mobile的标准写法，在链接，button中都加一个rel="external"属性，或则加上data-ajax="false"就能使得目标页面被完全重新加载。但是这样就无法实现动画效果了。

      既然jQuery mobile的ajax导航方式是选取目标页面的第一个data-role="page"的div用来替换当前页面的page，那么就将目标页面依赖的script和style都写到page里面，这样就能解决问题了。

      附上stackoverflow上的一个解决方案。