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>