jquery-Mobile->页面显示，但下一页没有

Question

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

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

当我第一次打开页面（主页）时，它加载良好，并显示了一些名称。 我单击名字，即John，它显示了John的详细信息。 当我单击“上一步”并单击“新名称”（即JANE）时，它什么都没有显示。

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

主页

家

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

详情页

<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>

这是我的DETAILS页面的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()的options对象来允许该页面在每次访问时进行刷新：

$(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元素，这会导致错误。