麻烦样式动态创建jquery mobile listview

Question

我正在尝试通过从 TMDb 下拉电影数据并构造每个 <li> 并将其附加到已经存在的 <ul> 元素来动态生成 jQuery 移动列表视图。麻烦的是，无论我做什么，我都无法正确获取它的格式。我从 TMDb 获取数据和所有内容都很好，但是当我调用 $("#ul").listview("refresh"); 时，列表视图本身并没有设置样式，这是我的一些代码（相关内容）：

AJAX CALL THAT GRABS DATA AND BUILDS EACH <li>:

    $.ajax({
        type: "POST",
        data: {
            action: 'searchFilm',
            film: film
        },
        dataType: "json",
        url: "./php/functions.php",
        success: function(json) {
            console.log(json);
            for(var i = 0;  i < Object.size(json); i++){
                var film = json[i.toString()];
                $('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='Poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>");
            }
        },
        error: function(jqxhr, status, text){
            console.log(jqxhr);
        }
    });

EXISTING CONTENT DIV THAT HOLDS THE <ul> ELEMENT:

 <div id="content-add-title" data-role="content">
    <ul id='film-search-results' data-role='listview'></ul>
 </div><!-- end content-add-title -->

AND THE FUNCTION THAT CALLS THE AJAX METHOD:

    $('#add-add-title-btn').click(function() {
        if ($('#add-title-type-select').val() === "movie") {
            $('#right-panel3').panel("close");
            $('#film-search-results').html("");
            searchFilms($('#add-title-name-field').val());
            $('#add-title-page').trigger("create");
            $('#film-search-results').listview("refresh");
        }
    });

真的不知道为什么它的样式不正确，有人有什么想法吗？

Answer 1

您需要在 ajax 调用成功时刷新列表视图，而不是在单击事件处理程序中 -

success: function(json) {
    console.log(json);
    for(var i = 0;  i < Object.size(json); i++){
        var film = json[i.toString()];
        $('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='Poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>");
    }
    $('#add-title-page').trigger("pagecreate"); // <- trigger pagecreate here, shouldnt need listview refresh
},

我猜您的 ajax 调用在 searchFilms 函数内。当您在调用 searchFilms 之后立即调用 $('#film-search-results').listview("refresh"); 和 $('#add-title-page').trigger("create"); 时，您的 ajax 调用尚未完成，并且尚未使用 JSON 响应填充列表视图。这就是它不起作用的原因。