0

我正在学习如何使用 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>
4

1 回答 1

0

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

几件事：

  1. 我建议花一些时间阅读 jQuery.Mobile 文档。jQueryMobile 有很多你不会自动猜到的怪癖。

  2. 正如评论者所说（正确），不要$(document).ready()与 jQueryMobile 一起使用。不是不能用，只是不推荐，用了很可能会遇到惊喜。

  3. 你想用什么来初始化你的代码取决于你在做什么。您很可能会想要使用$.mobile.pageInit.

    从文档

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

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

    我们建议绑定到此事件而不是 DOM ready()，因为无论是直接加载页面还是将内容作为 Ajax 导航系统的一部分拉入另一个页面，这都会起作用。

  4. 如果您只是想在点击时转到不同的页面，最好不要添加任何 javascript，而让 jQuery 负责页面处理。如果它是动态的，那么您将使用 (如建议的那样) $.mobile.changePage(url)。要使其显示为内联 - 在任何一种情况下 - 您都将使用persistent footers and headers（再次 - 请参阅文档）。

  5. 如果您坚持按照自己的方式进行操作（无论出于何种原因 - 可能有很多），那么您需要preventDefault()在单击链接时致电。 Return false将无法可靠地防止默认行为，并且鉴于 jqueryMobile 在处理事件时经常涉及许多不同的元素，使用它也不是一个坏主意stopPropagation()。但是，您最好完全删除锚点并使用类似的东西data-ajax-href来表示 jQuery 将要加载的页面。任何页面都有指向文档中任何位置的链接，jQueryMobile 将（除非特别指示不要）在第一个pageInit. 有时这可能很好，但对其他人则不然。

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

于 2013-08-09T02:10:25.563 回答