JQueryMobile 在第二页上不起作用答案

【问题标题】：JQueryMobile not working on the second pageJQueryMobile 在第二页上不起作用
【发布时间】：2011-10-18 10:22:47
【问题描述】：

我正在使用 jquery mobile 为 android 开发一个 phonegap 项目。该应用程序可以正常工作，但我需要在应用程序的开头添加一个新页面。完成后，当我导航到第二页时，此 jquery mobile 将不起作用。有人知道这是什么原因吗？

我所有的 javascript/jquery 都位于 main.js

这是第一页和第二页

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Demo With JQuery Mobile</title>
      <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" />
      <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
      <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script>
          <script type="text/javascript" charset="utf-8" src="main.js"></script>

    <!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />-->
    <!-- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>-->
    <!-- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>-->
    </head>
  <body data-theme="a">
    <div data-role="page" data-theme="a">
    <div data-role="header">
        <img src="images/joycard.png" alt="JoyCard" class="banner">
    </div>
    <div data-role="content">

        <h3>Partner News</h3>

            <div data-role="collapsible-set">
                <div data-role="collapsible" data-collapsed="false">
                    <h3>13 Kanus</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>A Lounge</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Kino</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Action Sport Berlin</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>13 Kanus</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>A Lounge</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Kino</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Action Sport Berlin</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>

            </div>
            <div id="example">
                <h2 onclick="toIndex();">To the app</h2>
            </div>

        </div> 
    </div>
  </body>
</html>




<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Demo With JQuery Mobile</title>
      <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" />
      <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
      <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script>
      <script type="text/javascript" charset="utf-8" src="main.js"></script>
          <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>


    <!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />-->
    <!-- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>-->
    <!-- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>-->
    </head>
  <body data-theme="a">
    <div data-role="page" data-theme="a">
        <div data-role="header">
            <img src="images/joycard.png" alt="JoyCard" class="banner">
        </div>
        <div data-role="navbar">
            <ul>
                <li><a onclick="categoriesList();" class="ui-btn-active">KATEGORIEN</a></li>
                <li><a onclick="mapDetails();">IN DER N&Auml;HE</a></li>
                <li><a onclick="allPartners();">ALLE PARTNER</a></li>
            </ul>
        </div><!-- /navbar --> 


        <div id="list" data-role="content" data-theme="a">
            <ul data-role="listview" data-inset="true" data-theme="a">
            </ul>
        </div><!-- end jqm content -->

        <div id="allPartners" data-role="content">  
            <ul data-role="listview" data-inset="true" data-theme="a">
            </ul>
        </div><!--/all partners list -->    

        <div id="loctext" ></div>

        <div id="map_canvas" class="mapView"></div>

        <div id="menu" data-role="content" class="menu" onClick="hideMenu();">
                    <a href="news.html" class="menu-item"><img src="images/news.png" alt="News"></a>
                    <a href="contact.html" class="menu-item"><img src="images/contact.png" alt="Contact"></a>
                    <a href="info.html" class="menu-item"><img src="images/info.png" alt="Info"></a>
        </div>
    </div>
  </body>
</html>

【问题讨论】：

这真的应该是最后缺少 .js - src="jquery.mobile/jquery-1.6.2.min"
所有脚本标签（除了谷歌地图）都是从向导生成的，所以我猜是这样，除非向导是错误的

标签： jquery android jquery-mobile cordova

【解决方案1】：

我猜这是带你到第二页的链接？

<h2 onclick="toIndex();">To the app</h2>

这个函数有什么作用？是不是用这个功能：

$.mobile.changePage("secondpage.html");

【讨论】：

我现在实际上已经对项目进行了重组。并且有带有 data-role="page" 的 div 标签，所以我只使用 1 个 html 文件。
但是是的，它正在使用该功能

【解决方案2】：

如果你现在只使用一个 html，你必须引用带有 id 的页面：

...... 转到第一页 ..........

您必须知道的重要一点是，一个 html 文件内的页面列表中的第一页将是第一页，因此在这种情况下，我将在启动屏幕之后显示 first_page。

在另一种情况下（使用不同的 html 文件）不需要在秒、第三页和其他没有 index.html 的页面中包含 de 样式，因为默认情况下都是用 js 加载的。所以首先加载 index.html 然后 jqm stats 工作，然后其他页面将加载 ajax 至少你禁用然后使用外部角色。

【讨论】：