Javascript jQuery Mobile doen'；无法加载外部脚本_Javascript_Jquery_Html_Jquery Mobile

Javascript jQuery Mobile doen'；无法加载外部脚本

javascript jquery html jquery-mobile

Javascript jQuery Mobile doen'；无法加载外部脚本,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我在jquerymobile1.4中使用PanZoom.js。所以我有两个html页面。第一个是index.html，第二个是instruction.html。我在第二个html上放置了两个jQuery页面。第一个jQuery页面可以正常工作，但第二个页面不行。如果我点击refresh，它就会工作。这意味着，它没有加载外部脚本。我该怎么办我的代码如下： <!doctype html> <!--[if lt IE 7]> <html class="ie6 old

我在jquerymobile1.4中使用PanZoom.js。所以我有两个html页面。第一个是index.html，第二个是instruction.html。我在第二个html上放置了两个jQuery页面。第一个jQuery页面可以正常工作，但第二个页面不行。如果我点击refresh，它就会工作。这意味着，它没有加载外部脚本。我该怎么办

我的代码如下：

<!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>&nbsp; </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>&nbsp; </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>


PTM 2013
缩比变焦，缩比变焦调幅{
宽度：100%；
-webkit用户拖动：无；
}
$（函数（）{
$（'div.pinch-zoom'）。每个（函数（）{
新的RTP.PinchZoom（$（this），{}）；
});
})
$（文档）。在（“pageinit”、“#说明页”上，函数（）{
$（“test”）。在（“SwiperRight”，function（）{//将'div'放在'test'中
/*$（“span”）.text（“检测到滑动！”）*/
$.mobile.changePage（“index.html”，{transition:“none”，changeHash:false}）；
});                       
});
介绍











介绍
缩比变焦，缩比变焦调幅{
宽度：100%；
-webkit用户拖动：无；
}
$（函数（）{
$（'div.pinch-zoom'）。每个（函数（）{
新的RTP.PinchZoom（$（this），{}）；
});
})

可能存在的重复项。当使用单页模型时，每个页面div应该位于一个单独的HTML文件中。jQM将只加载每个.html文件中的第一个页面div，而忽略其余部分。那么我该如何做呢？我已经放置了JS后，仍然没有工作！每个

data role=page

都应位于单独的HTML文件中。一个HTML文件中不能有多个页面。嗨，Omar，现在我在一个HTML文件中使用一个

data role=page

。但我仍然需要使用

datarel=“external”dataajax=“false”

来处理我的其他页面。因此，外部代码链接为：“”，但似乎只有index.html加载操作&其他不加载！：(