1

我正在创建一个应用程序，它将被 PhoneGapped 用于所有 jQuery Mobile 支持的平台。我有一个小问题让我很头疼。我允许用户将照片上传到他们拥有代码的相册。当他们输入代码并经过验证时，信息将存储在 localStorage 中，以便检索和注入 DOM。一切正常，但是刷新页面时会出现问题。进入 div 的内容未显示。我已经搜索了这个网站并按照其他人所说的，但仍然没有成功。我正在使用 jQM 1.3.0 和 jQ 1.9.1。下面是我的主页需要显示内容的代码。当我导航到另一个页面然后返回时，内容不存在，但是当我点击刷新时，它会显示出来。我在这里做错了什么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wedding</title>
    <link href="css/jquery-mobile.css" rel="stylesheet" />
    <link href="css/application.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <script src="js/global.js"></script>
    <script src="js/jquery-mobile.js"></script>
    <script src="phonegap.js"></script>
    <script scr="js/connection.js"></script>
</head>
<body>
    <div data-role="page" id="home">
        <div id="header" data-role="header"><p align="center">Wedding</p></div>
        <div id="content" data-role="content">
            <div id="message"></div>
            <nav>
                <ul id="listview" data-role="listview" data-inset="true" data-theme="c"></ul>
            </nav>
        </div>
        <div id="footer" data-role="footer" data-position="fixed">
            <nav data-role="navbar">
                <ul>
                    <li><a href="home.html" data-transition="slide" data-icon="home">Home</a></li>
                    <li><a href="instructions.html" data-transition="slide" data-icon="info">Instructions</a></li>
                </ul>
            </nav>
        </div>
        <script>
        $(document).on('pagebeforeshow', '#home', function() {
            var now = new Date();
            var utc_timestamp = now.getUTCFullYear() + '-' + ('0' + (now.getUTCMonth()+1)).slice(-2) + '-' + ('0' + now.getUTCDate()).slice(-2) + ' ' + ('0' + now.getUTCHours()).slice(-2) + ':' + ('0' + now.getUTCMinutes()).slice(-2) + ':' + ('0' + now.getUTCSeconds()).slice(-2);
            var album_id = localStorage.getItem('album_id');
            var album_start = localStorage.getItem('album_start');
            var album_end = localStorage.getItem('album_end');
            var album_title = localStorage.getItem('album_title');
            var album_bride = localStorage.getItem('album_bride');
            var album_groom = localStorage.getItem('album_groom');
            var album_photo = localStorage.getItem('album_photo');
            var album_user = localStorage.getItem('album_user');
            if (album_id === null) {
                $('#message').html('<p align="center">Not connected to an album.</p>');
                $("#listview").empty().append(
                    '<li><a href="login.html" data-transition="slide">Enter Album Code</a></li>' + 
                    '<li><a href="instructions.html" data-transition="slide">Instructions</a></li>'
                ).listview('refresh');
            } else if (utc_timestamp < album_start || utc_timestamp > album_end) {
                $('#message').html('<p align="center">The album you are connected to is not available.</p>');
                $("#listview").empty().append(
                    '<li><a href="update.html" data-transition="slide">Change Albums</a></li>' + 
                    '<li><a href="instructions.html" data-transition="slide">Instructions</a></li>'
                ).listview('refresh');
            } else {
                $('#message').html(
                    '<p align="center"><strong>Album:</strong> ' + 
                    album_title + ' <br /><strong>By:</strong> ' + 
                    album_bride + ' & ' + 
                    album_groom + '</p>' + 
                    '<p align="center"><img src="http://localhost/weddingconnect/media/photos/' + album_user + '/thumbnail/' + album_photo + '" /></p>'
                );
                $("#listview").empty().append(
                    '<li><a href="upload.html" data-transition="slide">Upload A Photo</a></li>' + 
                    '<li><a href="update.html" data-transition="slide">Change Albums</a></li>' + 
                    '<li><a href="instructions.html" data-transition="slide">Instructions</a></li>'
                ).listview('refresh');
            }           
        });
        </script>
    </div>
</body>
</html>
4

1 回答 1

1

看你的评论，这是个问题。

想想看，您有一个 jQuery Mobile 应用程序，其中所有页面都加载到 DOM 中。如果当您尝试访问某些内容时每个页面都具有相同的内容，您将在DOM. 这就是重新加载页面时一切正常的原因。基本上页面重新加载将清空DOM并且只有当前页面将保留在DOM.

但有一个好消息。jQuery Mobile 开发人员已经考虑到这一点，因此他们创建了一个名为 active page 的选择器：

var activePage = $.mobile.activePage;

基本上，这是您当前活动页面的选定 DOM。如果你试试这个：

alert($.mobile.activePage.attr('id'));

它会提醒您当前活动页面的 ID。如果您想深入访问某些内容，请使用以下命令：

var element = $.mobile.activePage.find('#elementID');
于 2013-05-29T13:49:54.083 回答