jquery moblie页面跳转JS失效解决办法

上午用jQuery Mobile写页面，在header中写了两个navbar的导航，实现页面加载时第一个导航显示，第二个导航隐藏，通过编写javascript脚本实现swipe滑动导航使两个导航显示与隐藏切换。

但点击页面链接跳转后，这一功能失效，页面没有读javascript脚本的内容，只有刷新页面方可解决。

通过官网找到原因：当用户点击一个jQuery Mobile驱动的网站的链接，默认会通过Ajax请求页面。当请求发出以后，框架会接收到内容，但是它只会将请求页面的body 内容插入到DOM中（或者只是 data-role="page" 的容器），这就意味着head标签中的元素不会被请求到。也就是说head标签中引用的脚本和样式在用通过AJAX加载后不会起作用，只能通过普通的HTTP请求执行。

官网的解决方案是，将script写在<data-role="page">后（但我尝试后问题没有解决）。如果为某一个页面特定的加载JS或CSS，建议用pagecreate事件将逻辑绑定进去，在页面被创建的时候执行需要的代码。这样可以保证代码在页面被直接加载或者通过Ajax请求到的时候被执行（也没有解决）。

对于所有jQuery Mobile中的链接，都有data-ajax的属性，规定是否通过Ajax来加载页面，设置为 false，则将进行普通的页面请求，问题解决。

简单的内容代码：

<script type="text/javascript" >
	$(document).on("pageinit",function(){
		$("#nav2").hide();
		$("#nav1").on("swipe",function(){
			$("#nav1").hide();
			$("#nav2").show();
		})
		$("#nav2").on("swipe",function(){
			$("#nav2").hide();
			$("#nav1").show();
		})
	})
</script>

<div data-role="page">
	<div data-role="header">
	  	<h1>标题</h1>
	  	<div data-role="navbar" id="nav1" >
	  		<ul>
	  			<li><a href="index.jsp" data-ajax="false">首页</a></li>
	  			<li><a href="xinwen.jsp" data-ajax="false">新闻</a></li>
	  			<li><a href="yule.jsp" data-ajax="false">娱乐</a></li>
	  			<li><a href="tiyu.jsp" data-ajax="false">体育</a></li>
	  			<li><a href="keji.jsp" data-ajax="false">科技</a></li>
	  		</ul>
	  	</div>
	  	<div data-role="navbar" id="nav2">
	  		<ul>
	  			<li><a href="tupian.jsp" data-ajax="false">图片</a></li>
	  			<li></li>
	  			<li></li>
	  			<li></li>
	  			<li></li>
	  		</ul>
	  	</div>
	</div>
</div>