Question

我正在创建一个小型的jQuery Mobile应用程序。我有一个带有横幅图像的主页，一个从json文件加载的段落，以及一个带有链表的第二页的链接，也是从json文件加载的。

主页：

<!DOCTYPE html>
<html>
    <head>
        <title>BikeShare</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
        <style>
            #banner {
                height: 175px;
                overflow: hidden;
                position: relative;
            }
            #banner img {
                display: block;
                position: absolute;
                bottom: 0;
                margin-right: auto;
                margin-left: auto;
                max-width: 100%;
            }
            .bold {
                font-weight: bold;
                border-bottom: 1px dotted;
            }
        </style>
        <script src="jquery-2.1.4.min.js"></script>
        <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script>
            function getLocations(data) {
                var locations = data.stationBeanList;
                var numLocations = 0;
                var numBikes = 0;
                for (var i = 0; i < locations.length; i++) {
                    if (locations[i].statusValue === 'In Service' && locations[i].availableBikes > 0) {
                        numBikes += locations[i].availableBikes;
                        numLocations++;
                    }
                }
                var message = '<p>There are a total of <span class="bold">' + numBikes + ' bikes</span> available in <span class="bold">' + numLocations + ' locations</span>.</p>';
                $("#home-content-heading").after(message);
            }

            $(document).on("pagecreate", "#home", function() {
                $.ajax({
                    url: "bikeshare.json",
                    type: "GET",
                    dataType: "json",
                    success: getLocations,
                    error: function() { console.log( 'Error...' ); }
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
                <ul data-role="listview">
                    <li><a href="">Home</a></li>
                    <li><a href="reports.html">Reports</a></li>
                    <li><a href="locations.html">Locations</a></li>
                </ul>
            </div>
            <div id="home-header" data-role="header" data-position="fixed" data-theme="b">
                <h1>Home</h1>
                <a href="#main-nav" class="ui-btn-left ui-btn ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
            </div>
            <div id="banner"><img src="bicycle-rental-dock.jpg" alt="A bicycle rental dock" /></div>
            <div role="main" id="home-content" class="ui-content">
                <h1 id="home-content-heading">BikeShare</h1>
                <a href="locations.html" class="ui-btn ui-shadow" data-transition="slide">View Locations</a>
            </div>
            <div data-role="footer" data-theme="b">
                <h4>&copy; 2015 BikeShare</h4>
            </div>
        </div><!-- end #home -->
    </body>
</html>

带链表的第二页：

<!DOCTYPE html>
<html>
    <head>
        <title>BikeShare</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="jquery-2.1.4.min.js"></script>
        <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script>
            $(document).on("pagecreate", "#locations", function() {
                function loadData(data) {
                    var locations = data.stationBeanList;
                    var list = '';
                    for (var i = 0; i < locations.length; i++) {
                        list += '<li><a href="">' + locations[i].stationName + '</a></li>';
                    }
                    $("#location-list").append(list).listview('refresh');
                }
                $.ajax({
                    url: "bikeshare.json",
                    type: "GET",
                    dataType: "json",
                    success: loadData,
                    error: function() { console.log('Failed to load bikeshare.json'); }
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="locations">
            <div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
                <ul data-role="listview">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="reports.html">Reports</a></li>
                    <li><a href="">Locations</a></li>
                </ul>
            </div>
            <div data-role="header" data-position="fixed" data-theme="b">
                <h1>Locations</h1>
                <a href="#main-nav" class="ui-btn-left ui-btn ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
            </div>
            <div role="main" class="ui-content">
                <ul id="location-list" data-role="listview"></ul>
            </div>
            <div data-role="footer" data-theme="b">
                <h4>&copy; 2015 BikeShare</h4>
            </div>
        </div><!-- end #locations -->
    </body>
</html>

我遇到的问题是，当我点击链接并转到第二页时，除非我点击浏览器刷新按钮，否则列表视图（来自json文件）不会显示。如果我点击刷新然后点击浏览器后退按钮，第一页上的横幅没有应用自定义css，此外，之前从json文件加载和显示的数据已经不存在了。我没看到我的代码出错了。任何帮助表示赞赏。

Answer 1

jQuery Mobile默认情况下通过ajax将外部页面加载到当前页面的DOM中。但是，它只使用data-role =“page”加载第一个DIV的标记。

因此，您可以将位置javascript移动到data-role =“page”DIV。

如果你不喜欢AJAX导航系统，你可以“关闭它”，但是你会失去漂亮的过渡。

阅读本文：http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/

jQuery Mobile - Listview仅在第二页刷新时加载

1 个答案: