Question

我正在使用jquery mobile为android设计一个phonegap项目。该应用程序找不到但我需要在应用程序的开头添加一个新页面。完成后，当我导航到第二页时，jquery移动设备无效。有人知道这个的原因吗？

我的所有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>

Answer 1

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

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

这个功能有什么作用？它是否使用此功能：

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

Answer 2

如果你现在只使用一个html，那么你可以使用id来引用这些页面：

＆LT; div data-role =“page”data-theme =“a”id =¨first_page¨＆gt;

＆LT; div data-role =“page”data-theme =“a”id =¨second_page¨＆gt; ............. 转到第一页 ..........

你必须知道的一件事是，一个html文件中的页面列表中的第一页将是第一页，所以在这种情况下，我会在启动画面后显示first_page。

在另一种情况下（使用不同的html文件）不一定包括在index.html中的秒，第三和其他页面中的de样式，因为默认情况下使用js加载所有。所以首先是使用index.html，然后使用jqm统计数据，然后其他页面将加载ajax，至少你禁用当时或使用外部rol。

JQueryMobile没有在第二页上工作

2 个答案: