Javascript Jquery移动页面页脚跳出<；div数据角色="；第页“&燃气轮机</部门>；_Javascript_Jquery_Html_Css_Jquery Mobile

Javascript Jquery移动页面页脚跳出<；div数据角色="；第页“&燃气轮机</部门>；

javascript jquery html css jquery-mobile

Javascript Jquery移动页面页脚跳出<；div数据角色="；第页“&燃气轮机</部门>；,javascript,jquery,html,css,jquery-mobile,Javascript,Jquery,Html,Css,Jquery Mobile,我有一个html和两个jquery移动页面（两个data role='page'）每一页都有页眉、内容和页脚但我发现当页面被加载时，第二个页面的页脚跳出以下是我的源代码： <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, rem

我有一个html和两个jquery移动页面（两个data role='page'）每一页都有页眉、内容和页脚

但我发现当页面被加载时，第二个页面的页脚跳出

以下是我的源代码：

<html>
<head>
   <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <link rel="stylesheet" href="stylesheets/style.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
    <script src="/javascripts/setCSStrick.js"></script>
    <script src="/javascripts/loadXMLpaper.js"></script>
    <script src="/javascripts/loadXMLauthor.js"></script>
    <title>P</title>
</head>
<body>

     <div id="paperListPage" data-role="page" data-add-back-btn="true">
          <div data-role="header" >

             <h1>Paper List</h1>
              <!--<a href="#" class="ui-btn-left" data-rel="back">Back</a>-->
            <a href="/" data-transition="fade" data-icon="home" class="ui-btn-right">Home</a>
          </div>
           <div data-role="content" class="ui-content" role="main">
                    <ul data-role="listview" id="list-paperList" class="ui-listview" data-autodividers="true" data-filter="true">

                    </ul>
           </div>
           <div data-role="footer" data-position="fixed"> 
             <div data-role="navbar">
                 <ul >
                    <li ><a href="#" class="ui-btn-active ui-state-persist">PaperList</a></li>
                    <li ><a href="#peoplePage">People</a></li>
                 </ul>
             </div><!-- /navbar -->
          </div> 
    </div>

     <div id="peoplePage" data-role="page" data-add-back-btn="true">
            <div data-role="header" >
               <h1>People</h1>
                <!--<a href="#" class="ui-btn-left" data-rel="back">Back</a>-->
                    <a href="/" data-transition="fade" data-icon="home" class="ui-btn-right">Home</a>
            </div>
              <div id="content" data-role="content"  class="ui-content" role="main">
                <ul data-role="listview" id="list-author" data-autodividers="true" data-filter="true">
                </ul>
              </div>
            <div data-role="footer" data-position="fixed"> 
               <div data-role="navbar">
                   <ul >
                      <li ><a href="#paperListPage">PaperList</a></li>
                      <li ><a href="#" class="ui-btn-active ui-state-persist">People</a></li>
                   </ul>
               </div><!-- /navbar -->
            </div> 
    </div>


    <!--<script type="text/javascript" src="phonegap.js"></script>-->
    <!--<script type="text/javascript" src="javascripts/index.js"></script>-->
</body>


P
纸质清单






人

以下是chrome开发工具的源代码截图：

它在同一个页面中，仅检查此项。它在jsfiddle.net中看起来不错，但我在本地环境中仍然存在相同的问题，我想知道是否可能与我的js文件有关？因为在我的loadXMLauthor.js中，我将动态地将页面附加到body.btw，我使用rel='external'链接到这些页面