jquery.mobile-1.3.1.min.js打破<nav> ID选择器</nav>

时间:2013-08-05 17:35:45

标签: html5 jquery-mobile

我正在构建一个使用该标签导航页面的网页 -

<a href="#mymenutag">Menu</a>
...
<nav id="mymenutag">
<ul>
 <li class="first"><a href="index.html">Index</a></li>
 <li><a href="happy.html">Happy</a></li>
 <li class="last"><a href="nowhere.html">Nowhere</a></li>
</ul>
/nav>

这通常可以正常工作,除非我还包含脚本引用 -

<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>  

然后,导航不再起作用。还有许多其他jquery移动脚本正在加载,但这是打破导航的脚本。还有一些其他ID选择器仍然有效,但我认为它们是通过jquery mobile处理的。这个不是;它只是导航到同一页面上的新位置。

我在github上设置了一个工作示例,可以在这里找到:

https://github.com/hypnoboy/jqmobile_breaks_html5_navt

点击页面可以观察到这种行为。作为奖励,为了让它更容易看到,我添加了我最喜欢的“WTF”软件安装时刻的jpg照片。

以下是可能出现问题的完整示例网页:

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <head>
        <!--begin entries for jquerymobile-->        
        <link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
        <script src="libs/jquery-1.9.1.min.js" type="text/javascript"></script>        

        <!--end entries for jquerymobile-->
   </head>

    <body>
        <!-- start of navigation -->
         <a href="#mymenutag">Menu</a>
         <!-- end of navigation -->
           <script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>  
  <!--    causes href navigation in the page to fail -->

            <header><div class=main_heading>
                <h1>Sad Test App (jquery.mobile-1.3.1.min.js is running)</h1></div>
            </header>

   <p>This is some sample text
    </p>
                    <a href="#mymenutag">Menu</a>
             <a href="#mymenutag" data-role="button" data-transition="slide">Menu</a>
     <img   id="front"   src="WP_000241.jpg"/>
           <!--start of navigation-->   
     <nav id="mymenutag">
    <ul>
     <li class="first"><a href="index.html">Index</a></li>
      <li><a href="happy.html">Happy</a></li>
      <li class="last"><a href="nowhere.html">Nowhere</a></li>
    </ul>
    </nav>
             <!-- /end of navigation -->  



        <script src="js/vendor/jquery-2.0.2.min.js"></script>
        <script src="js/helper.js"></script>
        <script src="js/main.js"></script>
        <script src="libs/app.js" type="text/javascript"></script>
        <script src="pages.js" type="text/javascript"></script>

      <footer data-role="footer" data-position="fixed">
    <h1>Footer</h1>
  </footer>

    </body>
</html>

任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

JQuery Mobile的一个特性是一次将2个页面加载到DOM中,只显示一个。它是JQM ajax功能的一部分。如果您在母版页中使用了ID或者加载到多个页面中的部件,您可能会发现在运行时检查您的源时您有重复的ID

关闭ajax功能并让它进行回发是一种解决方法,或使用类

显示问题的图像(来自复数视频课程视频的图像)

Image showing the issue