Question

我正在创建一个可以在所有jQuery Mobile支持的平台上使用PhoneGapped的应用程序。我有一个小问题，让我头疼。我允许用户将照片上传到他们有代码的相册。当他们输入代码并验证时，信息存储在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>

Answer 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');

当页面显示时，jQuery Mobile显示内容

1 个答案: