JqueryMobile链接一个页面，而链接页面中图片需刷新才显示的问题

转自：http://tim-fly.iteye.com/blog/1453766

最近在做一个项目，由于涉及到跨平台性，所以采用了jquerymobile这个框架，在开发过程中，一开始为了图测试方便，采用了chrome浏览器来测试运行。现叙述如下问题：

当在first.html中，有个链接如：<a href="second.html" data-role="button" id="submit">登录</a>

而在second.html中，譬如我引用了highcharts这个jquery图表插件，会在second.html页面中生成一些图表。

可是这种情况，当我用chrome浏览器点击“登录”按钮时，链接到second页面，可是second页面的图表不会显示，需要刷新一下才能显示图表，于是我结合了phonegap，把此项目布到android手机中进行测试，也是如此。我很是郁闷，我后来换了360浏览器进行测试，虽然不支持jquerymobile框架主题样式显示，不过它链接过去能一下子出现图表的，而不需要刷新。对此，我就开始怀疑是否是浏览器链接加载页面的方式不一样的问题了。

反正中间耗费了很多时间去定位问题的所在。也是由于刚接触此类技术，并不是很精。后来想想还是追本还原，回到最起点，把jquerymobile的链接看了一下，有这么一段话：

Jquery Mobile支持所有标准的html格式，为了让体验更加流畅,Jquery Mobile会把同一个域下的所有指向页面的链接都会自动转为ajax请求，并且用动画的转场效果实现切换

指向别的域的链接或者是含有 rel="external", data-ajax="false" 属性的链接以及含有target属性的链接不会通过ajax加载，页面会整体被刷新。

对此，我就考虑到了，是否是因为chrome为了提高页面的加载速度，采用了ajax加载，页面不会整体被刷新。于是我就在button按钮上加上了data-ajax="false"，然后果然行了。

正确的方式如下：<a href="second.html" data-role="button" id="submit" data-ajax="false" >登录</a>