为什么使用 .load() 导航时我的导航栏会重复？答案

【问题标题】：why does my nav bar duplicate when navigating with .load()?为什么使用 .load() 导航时我的导航栏会重复？
【发布时间】：2013-08-08 21:54:39
【问题描述】：

我正在学习如何使用 jquery mobile 编写我的第一个移动网站。

我在页面的页眉和页脚都有导航栏，每个导航栏有 2 个链接。在此之下，我制作了带有 ID 的 div，我想将这些 ID 加载到 #loadcontent div 中，使用准备好的 .load() 函数替换旧内容，它们确实这样做了，但之后在我的旧页眉和页脚上加载了重复的导航栏，捏碎屏幕。

我怎样才能防止它这样做？
请访问 skroovy.com/index2.html 亲自查看（用于移动浏览器）
谢谢！

<!DOCTYPE html>
<html> 
<head>  
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

    <link rel="stylesheet" href="css/skroovystyles.css">

    <title>Skroovy!</title>     
</head>


<body>
<script>
$(document).ready(function() {
    $('#topnav a').click(function() {
        var url=$(this).attr('href');
        $('#loadcontent').load(url);
        return false;
    });

    $('#btmnav a').click(function() {
        var url=$(this).attr('href');
        $('#loadcontent').load(url);
        return false;
    }); 
}); // end ready
</script>


<!-- Home (not logged in) -->
<div id="home" data-role="page">

 <div data-theme="a" data-role="header" data-position="fixed">
        <div id="topnav" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#login" data-transition="fade" data-theme="" data-icon="star">
                        Log In
                    </a>
                </li>
                <li>
                    <a href="#entercode" data-transition="fade" data-theme="" data-icon="check">
                        Enter Code
                    </a>
                </li>
            </ul>
        </div>
 </div>

 <div data-role="content">
 <div id='loadcontent'>
    <div style=" text-align:center">
            <img style="width: 100%; height: px" src="images/Skroovy logo large.png">
        </div>
        <div style=" text-align:center">
            <img style="width: 100%; height: px" src="images/headerlogo.png">
        </div>
 </div>
 </div>

 <div data-theme="a" data-role="footer" data-position="fixed">
       <div data-role="navbar" data-iconpos="top" id='btmnav'>
            <ul>
                <li>
                    <a href="index2.html#about" data-icon="info">
                        About
                    </a>
                </li>
                <li>
                    <a href="#newuser" data-transition="fade" data-theme="" data-icon="plus">
                        New User
                    </a>
                </li>
            </ul>
        </div>
 </div>
</div>



<div id='login'>
    <br><br><br><br>
    <h3>Log In Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='entercode'>
    <br><br><br><br>
    <h3>Enter Code Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='about'>
    <br><br><br><br>
    <h3>Skroovy is the awesome stuff. You should really buy this Skrooviness now.</h3>        
        <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='newuser'>
    <br><br><br><br>
    <h3>New User Register Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

</body>
</html>

【问题讨论】：

使用$.mobile.changePage(url); 而不是.load()。并且不要在 JQM 中使用.ready()。
$.mobile.changePage() 是否允许我仅将标记加载到 data-role=content 内的目标 div (#loadcontent) 中，而不是重新加载或弄乱我的导航栏页眉/页脚？
我的最终目标是能够使用动画页面过渡，但只能在内容 div 内使用，而只留下页眉和页脚。

标签： jquery jquery-mobile navigation mobile-website

【解决方案1】：

忽略帖子下方的$.mobile.changePage(url) 评论；没用。

几件事：

我建议花一些时间在jQuery.Mobile Documentation 上。 jQueryMobile 有很多你不会自动猜到的怪癖。
正如评论者所说（正确），不要在 jQueryMobile 中使用 $(document).ready()。不是不能用，只是不推荐，用了很可能会遇到惊喜。
您要用于初始化代码的内容取决于您正在执行的操作。您很可能希望使用$.mobile.pageInit。

来自文档

说明：在正在初始化的页面上触发，在初始化发生后。

jQuery( ".selector" ).on( "pageinit", function( event ) { ... } )

我们建议绑定到此事件而不是 DOM ready()，因为无论是直接加载页面还是将内容作为 Ajax 导航系统的一部分拉入另一个页面，这都会起作用。
如果您只是想通过点击转到不同的页面，最好不要添加任何 javascript，而让 jQuery 负责页面处理。如果它是动态的，那么您将使用（如建议的那样）$.mobile.changePage(url)。要使其显示为内联 - 在任何一种情况下 - 您都可以使用 persistent footers and headers（再次 - 请参阅文档）。
如果您坚持按照您的方式进行操作（无论出于何种原因 - 可能有很多），那么您需要在单击链接时致电 preventDefault()。 Return false 不能可靠地工作以防止默认行为，并且鉴于 jqueryMobile 在处理事件时经常涉及许多不同的元素，因此使用 stopPropagation() 也不是一个坏主意。但是，您最好完全删除锚点并使用data-ajax-href 之类的东西来表示jQuery 将要加载的页面。任何页面都有指向文档中任何位置的链接，jQueryMobile 将（除非特别指示不要）在第一个 pageInit 之后预加载。有时这可能很好，但对其他人则不然。

基本上，如果没有更清楚地了解您想要实现的目标以及更符合文档标准的代码，我无法针对您的具体情况提出建议（无论如何更是如此）。您可能想要的一切都在文档中，而且它们比我见过的几乎任何其他 Javascript 库 API 都更具可读性。看看他们。

【讨论】：

在再次筛选文档并寻找持久的页眉和页脚后，我发现如果我只是为每个页面中的页眉和页脚分配相同的 data-id，它会保持持久性，允许页面过渡动画仅影响内容。 “持久”是我一直在寻找的关键词！ ezpz，谢谢！