主页

Question

我正在使用jquery-mobile开发基本页面。

我目前有2页数据。 HOME = ListView的名称 DETAILS =名称的详细信息

当我第一次打开页面（主页）时，它加载良好，并显示一些名称。我点击了FIRST名称（即：John），它显示了John的详细信息。当我单击BACK，然后单击一个新名称（即：JANE）时，它不会显示任何内容。

但如果我点击回到JOHN，它会显示他的信息。我不确定是什么原因导致第二次不加载，也许是缓存？任何想法都会有所帮助。

主页

    <div data-role="content">
         <ul id="homeList" data-role="listview"></ul>
    </div>
</div>

DETAILS PAGE

<div id="detailsPage" data-role="page" >
    <div data-role="header" data-position="fixed"><h1>Details</h1></div>

    <div data-role="content">
        <ul id="details" data-role="listview"></ul>
    </div>
</div>

</body>

这是我的详细信息页面的Javascript

/* JQUERY
-------------------------------------------------------------------- */
$("#detailsPage").live('pageshow', function(event){

    var serviceToLoad = "details.php";
    var pageId        = "#detailsPage";
    var contentId     = "#details";

    // getId from global.js function
    var id = getUrlVars()["id"];

    // Apply the content to the page
    getDetails(contentId, id);
});


/* FUNCTION SET
-------------------------------------------------------------------- */
function getDetails(contentId, id) {

    // Load the JSON
    $.getJSON(serviceUrl + 'details.php?id='+id, function(data) {

        // Remove all content first
        $(contentId + ' li').remove();

        // We only need to grab the 1 result
        var details = data.items[0];
        $(contentId).append('<li><a href="#">' + details.name + '</a></li>\n');

        // Refresh page
        $(contentId).listview('refresh', true);

    });
}

任何方向都会非常感激，jQuery-Mobile对我来说很新，但看起来很有趣！

更新：这是我目前工作的“位置”。 http://apps.stickystudios.ca/www/

Answer 1

如果您的详细信息页面位于主页的单独文档中，那么您可以使用$.mobile.changePage()的选项对象来允许每次访问页面时刷新页面：

$(document).delegate('#home', 'pageinit', function () {
    $('#homeList').find('a').bind('click', function () {
        $.mobile.changePage(this.href, {
            reloadPage : true
        });
        return false;
    });
});

$.mobile.changePage()的文档：http://jquerymobile.com/demos/1.0.1/docs/api/methods.html

更新

我通过开发者控制台将此代码添加到您的页面中：

$(document).delegate('#detailsPage', 'pagehide', function () { $(this).remove(); });

每次导航时都会移除#detailsPage伪页面。您遇到的问题是DOM中有多个#detailsPage元素会导致错误。

jquery-Mobile - ＆gt;页面显示，但下一页没有

主页

1 个答案:

更新