jquery - 完整功能中的ajax调用后刷新jquery mobile listview不起作用

Question

我正在使用 jQuery 1.3.1 和phonegap 2.9.0 开发一个应用程序。

使用 php 从服务器动态加载所有数据。我的问题是刷新调用在每次 ListView 项发生变化时都不起作用。我已经尝试和搜索了很多，但还没有成功。 我的想法是，刷新函数在 ListView 完成之前被调用，但是在我尝试放置这行代码的任何地方它都不起作用。

有什么帮助吗？

这是我的 ListView

<ul data-role="listview" data-autodividers="true" id="listview1" data-divider-theme="b" data-split-theme="b" data-filter-theme="b" data-split-icon="phone" data-filter="true" data-filter-placeholder="Search..." ></ul>

这是我如何对服务器进行 ajax 调用

$.ajax({url: JsonURL
           beforeSend: function(){ $.mobile.showPageLoadingMsg('b', 'Updating content...', true); },
           complete: function () { 
                                  console.log("refreshing..");
                                  $('#listview1').listview('refresh');
                                  $('#listview2').listview('refresh');
                                  $('#listview3').listview('refresh');
                                  $.mobile.hidePageLoadingMsg(); },
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           async: true,
           success: function (result) {
                     data = result;
                     app.setupdevice();
                     $.mobile.changePage('#home', {transition: 'slide'});
                   },
                   error: function (request, error) {
                            console.log(error.message);
                        }
            });

这里是我如何创建 ListView 。每次列表项更改时都会运行此代码，以使用新项更新列表。

在 success 函数中，我调用 setupdevice 来初始化 ListView ，如下所示。然后在完整的功能中我刷新 ListView 。由于某种原因，它仅在第一次刷新。

items='';    
$.each(data.pois, function() {
             items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
            });

            $('#listview1').html(items);

这是我第一次遇到这个问题，我真的很生气，因为我找不到为什么会发生这种情况。

Answer 1

Listview刷新应该在填充ul元素后执行，所以这样做:

items='';    
$.each(data.pois, function() {
    items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
});

$('#listview1').html(items);
$('#listview1').listview('refresh');

这样您就可以确保 ListView 仅在附加内容后才会刷新。

编辑:

评论中提到的问题可以这样解决:

items='';    
$.each(data.pois, function() {
    items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
});

$('#listview1').html(items);
$('#listview1').listview().listview('refresh');

第一个 ListView 调用将初始化小部件，第二个调用将刷新它。