Question

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

我在页面的页眉和页脚都有导航栏，每个都有2个链接。在那之下，我已经使用ID加载了div，我希望将其加载到#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>

Answer 1

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

几件事：

我建议您花一些时间jQuery.Mobile Documentation。有很多特定于jQueryMobile的怪癖，你不会自动猜测。
正如评论者所说（正确），请不要将$(document).ready()与jQueryMobile一起使用。并不是它不能被使用，只是它不被推荐，如果你这样做，你可能会遇到意外。
您要用于初始化代码的内容取决于您正在执行的操作。您很可能想要使用$.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都更具可读性。检查一下。

为什么我的导航栏在使用.load（）导航时会重复？

1 个答案: