0 
function returnQueryResultJson(url,callback) {
   return  $.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        success: function(response) {
            callback(response);
        }
    });
}

function showCategory(url,hash, options) {
    var cat = hash.replace(/.*category=/, "");
    if (cat == '#page1') {
        cat = '';
    }
    var a = returnQueryResultJson('http://www.placetowebservice.nl/categories.php?category=' + cat,function(res) {
        var
            category = res,
            pageSelector = hash.replace(/\?.*$/, ""),
            $page = $(pageSelector),
            $header = $page.children(":jqmData(role=header)"),
            $content = $page.children(":jqmData(role=content)"),
            markup = '<ul data-role="listview" data-theme="c" data-dividertheme="b">';
            var cItems = category;
            var headername = category.name;
            var numItems = cItems.length;
            if (cat == '') {
                markup = '<ul data-role="listview" data-theme="c" data-dividertheme="b" style="min-height:100%;">';
            }
            for (var i=0;i<numItems;i++) {
                markup += '<li><a href="#category-item?category=' + cItems[i].id + '" data-rel="close"><h3>' + cItems[i].title + '</h3><p>' + cItems[i].description + '</p></a></li>';
            }
            markup += "</ul>";
            $header.find("h1").html(headername);
            $content.html(markup);
            $page.page();
            $content.find(":jqmData(role=listview)").listview();
            options.dataUrl = url;
            options.changeHash = true;
            options.reloadPage = true;
            console.log($page);
            $.mobile.changePage($page, options);
        //}
    });

}
$(document).bind("pagebeforechange", function(e,data) {
    if (typeof data.toPage === "string") {
        var
            uz = $.mobile.path.parseUrl(data.toPage),
            re = /^#category-item/,
            re2 = /^#page1/
            ;
        if (uz.hash.search(re) !== -1 || uz.hash.search(re2) !== -1) {
            showCategory(uz.href,uz.hash,data.options);
            e.preventDefault();
        }
    }
});

我有这个代码，它工作得很好（第一次）。我首先加载一个页面：

$(document).ready(function(){
    $.mobile.changePage('index.html#page1',{ dataUrl: "index.html#page1?category=", transition: "fade" });
});

它可以工作，它在 id="page1" 的页面中加载 ajax 数据。

然后我单击一个链接（类别 1），它显示第二页（id="category-item"）并用正确的数据填充它（类别 1：sub 1，类别 1：sub 2）。然后我回去，它再次显示类别。

现在问题出现了，当我单击下一个类别（类别 2）时。当我转到该页面时，它会提供来自 ajax 的正确数据（我使用 console.log 进行检查），但屏幕上的数据仍然是类别 1 中的数据。

因此，即使您之后转到另一个类别，您单击的第一个类别中的内容也会保留。它将继续显示您第一次单击的类别。

我究竟做错了什么？

4

1 回答 1

0

当我这样做时，它起作用了：

$page.page();
$page.trigger('create'); // added this one
$content.find(":jqmData(role=listview)").listview();
$content.find(":jqmData(role=listview)").listview("refresh"); // added this one
于 2013-05-08T09:07:56.920 回答