Question

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" });
});

可行，它会在页面中加载ajax-data，其中id =“page1”。

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

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

因此，您点击的第一个类别的内容仍然存在，即使您之后转到另一个类别。它将继续显示您首次点击的类别。

我做错了什么？

Answer 1

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

$page.page();
$page.trigger('create'); // added this one
$content.find(":jqmData(role=listview)").listview();
$content.find(":jqmData(role=listview)").listview("refresh"); // added this one

JQueryMobile：包含数据的页面（来自ajax）不会改变

1 个答案: