我正在使用PanZoom.js和jQuery Mobile 1.4。 所以我有2个html页面。第一个index.html＆amp;第二个是instruction.html。我在第二个html上放了两个jQuery页面。第一个jQuery页面工作正常，但第二个没有。如果我点击刷新，它就可以找到。这意味着，它没有加载外部脚本。 我该怎么办？
我的代码如下：
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<html manifest="app.manifest">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PTM 2013</title>
<link href="resources/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="resources/css/ptm.css" rel="stylesheet" type="text/css">
<link href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="resources/js/respond.min.js"></script>
<script src="jquery.mobile-1.4.0/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<!-- JQuery Mobile Theme -->
<link rel="stylesheet" href="resources/css/themes/ryco.css" />
<link rel="stylesheet" href="resources/css/themes/jquery.mobile.icons.min.css" />
<!-- /JQuery Mobile Theme -->
<!-- apple stuffs -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="resources/icon/icon-144.png">
<link rel="apple-touch-icon" sizes="76x76" href="resources/icon/icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="resources/icon/icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="resources/icon/icon-152.png">
<!-- /apple stuffs -->
<!-- pinch zoom -->
<link rel="stylesheet" href="resources/pinchzoom/pinch-zoom-style.css" />
<style type="text/css">
div.pinch-zoom, div.pinch-zoom img {
width: 100%;
-webkit-user-drag: none;
}
</style>
<script src="resources/pinchzoom/pinchzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
<!-- /pinch zoom -->
</head>
<body>
<div class="gridContainer clearfix">
<div id="full-wide">
<div data-role="page" id="instruction-page" class="slide">
<!-- Slide Page -->
<script>
$(document).on("pageinit","#instruction-page",function(){
$("test").on("swiperight",function(){ //put 'div' in 'test'
/* $("span").text("Swipe detected!");*/
$.mobile.changePage( "index.html", { transition: "none", changeHash: false });
});
});
</script>
<!-- /Slide Page -->
<div data-role="header" data-position="fixed">
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="index.html">Home</a>
<h1>INTRODUCTION</h1>
<a href="#popupMenu" data-rel="popup" data-role="button" data-transition="slide" aria-haspopup="true" aria-owns="popupMenu" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext">Menu</a> </div>
<div data-role="content" >
<span> </span>
<div class="pinch-zoom">
<img src="resources/images/introduction/p-1.jpg"> </div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="header"> <a href="javascript:window.history.go(-1);" data-rel="back" class="ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext">Icon only</a>
<a href="#page2" class="ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext">Icon only</a>
<h1> </h1>
</div>
</div>
<!-- Popup menu -->
<div class="ui-popup-container ui-popup-hidden" id="popupMenu-popup">
<div data-role="popup" id="popupMenu" class="ui-popup ui-overlay-shadow ui-corner-all" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
<ul data-role="listview">
<li><a href="Introduction.html"><img class="ui-li-icon" src="resources/images/thumblins/intro-cover.gif">Introduction</a></li>
<li><a href="Hoses.html"><img class="ui-li-icon" src="resources/images/thumblins/hoses-cover.gif">Hoses</a></li>
<li><a href="Couplings.html"><img class="ui-li-icon" src="resources/images/thumblins/couplings-cover.gif">Couplings</a></li>
<li><a href="Adaptors.html"><img class="ui-li-icon" src="resources/images/thumblins/adaptors-cover.gif">Adaptors</a></li>
<li><a href="Accessories.html"><img class="ui-li-icon" src="resources/images/thumblins/accessories-cover.gif">Accessories</a></li>
<li><a href="Filters.html"><img class="ui-li-icon" src="resources/images/thumblins/filters-cover.gif">Filters</a></li>
<li><a href="Technical.html"><img class="ui-li-icon" src="resources/images/thumblins/technical-cover.gif">Technical</a></li>
<li><a class="ui-icon-info ui-btn ui-btn-icon-left" href="instruction-app.html">Instruction</a></li>
<li><a class="ui-icon-refresh ui-btn ui-btn-icon-left" href="javascript:refreshPage()">Refresh Page</a></li>
</ul>
</div>
</div>
<!-- /popup menu -->
</div>
<!-- /Page1 -->
<!-- /Page2================================================================= -->
<div data-role="page" id="page2" class="slide">
<div data-role="header" data-position="">
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="index.html">Home</a>
<h1>INTRODUCTION</h1>
<a href="#popupMenu" data-rel="popup" data-role="button" data-transition="slide" aria-haspopup="true" aria-owns="popupMenu" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext">Menu</a> </div>
<div data-role="content" >
<span> </span>
<!-- pinch zoom -->
<link rel="stylesheet" href="resources/pinchzoom/pinch-zoom-style.css" />
<style type="text/css">
div.pinch-zoom, div.pinch-zoom img {
width: 100%;
-webkit-user-drag: none;
}
</style>
<script src="resources/pinchzoom/pinchzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
<!-- /pinch zoom -->
<div class="pinch-zoom">
<img src="resources/images/introduction/p-2.jpg"> </div>
</div>
<div data-role="footer" data-position="" data-theme="b">
<div data-role="header"> <a href="javascript:window.history.go(-1);" data-rel="back" class="ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext">Icon only</a>
<a href="#page2" class="ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext">Icon only</a>
<h1> </h1>
</div>
</div>
<!-- Popup menu -->
<div class="ui-popup-container ui-popup-hidden" id="popupMenu-popup">
<div data-role="popup" id="popupMenu" class="ui-popup ui-overlay-shadow ui-corner-all" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
<ul data-role="listview">
<li><a href="Introduction.html"><img class="ui-li-icon" src="resources/images/thumblins/intro-cover.gif">Introduction</a></li>
<li><a href="Hoses.html"><img class="ui-li-icon" src="resources/images/thumblins/hoses-cover.gif">Hoses</a></li>
<li><a href="Couplings.html"><img class="ui-li-icon" src="resources/images/thumblins/couplings-cover.gif">Couplings</a></li>
<li><a href="Adaptors.html"><img class="ui-li-icon" src="resources/images/thumblins/adaptors-cover.gif">Adaptors</a></li>
<li><a href="Accessories.html"><img class="ui-li-icon" src="resources/images/thumblins/accessories-cover.gif">Accessories</a></li>
<li><a href="Filters.html"><img class="ui-li-icon" src="resources/images/thumblins/filters-cover.gif">Filters</a></li>
<li><a href="Technical.html"><img class="ui-li-icon" src="resources/images/thumblins/technical-cover.gif">Technical</a></li>
<li><a class="ui-icon-info ui-btn ui-btn-icon-left" href="instruction-app.html">Instruction</a></li>
<li><a class="ui-icon-refresh ui-btn ui-btn-icon-left" href="javascript:refreshPage()">Refresh Page</a></li>
</ul>
</div>
</div>
<!-- /popup menu -->
</div>
<!-- /Page1 -->
</div>
</div>
</body>
</html>