从 ajax 动态生成列表视图 - 刷新不起作用答案

【问题标题】：Generate listview dynamically from ajax - refresh not working从 ajax 动态生成列表视图 - 刷新不起作用
【发布时间】：2012-11-23 12:46:17
【问题描述】：

我想用 jquery mobile 动态生成一个列表视图。我有这段代码，但 .listview('refresh') 不起作用：

<div id="content" data-role="content">       
</div><!-- /content -->

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "my.json",
        dataType: "json",
        success: function(articles) {
            var html = '<ul id="hellolist" data-role="listview"><li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li></ul>';            
            $('#content').append($(html));
            $('#hellolist').listview('refresh');
        }                            
    });
</script>

如果我只生成列表项或者我不使用 ajax 刷新格式列表视图。

测试#1：效果很好。

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

<script type="text/javascript">
        var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';            
        $('#hellolist').append($(html));
        $('#hellolist').listview('refresh');
</script>

测试#2：效果很好。

<div id="content" data-role="content">       
</div><!-- /content -->

<script type="text/javascript">
        var html = '<ul id="hellolist" data-role="listview"><li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li></ul>';            
        $('#content').append($(html));
        $('#hellolist').listview('refresh');
</script>

测试#3：效果很好。

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

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "my.json",
        dataType: "json",
        success: function(articles) {
            var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';            
            $('#hellolist').append($(html));
            $('#hellolist').listview('refresh');
        }                            
    });
</script>

有人有办法解决这个问题吗？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

如果你不想在 HTML 中出现空的 UL 标签，你可以尝试调用 .trigger('create") 方法而不是 .listview("refresh");

如果这不起作用，请尝试调用 .listview();没有“刷新”参数。

所以，基本上，而不是

$('#hellolist').listview('refresh');

试试

$('#hellolist').trigger('create');

或

$('#hellolist').listview();

祝你好运。

编辑：如果仍然无法正常工作，您可以尝试在包含新列表的页面上触发创建事件。

【讨论】：

【解决方案2】：

第一个不起作用，因为您也附加了 UL 标记。尝试仅附加“LI”标签，UL 应该已经在 html 结构中。

var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';

在您的 html 中：

   <ul data-role="listview" id="" data-split-icon="gear" data-split-theme="a" ></ul>

【讨论】：

我想他知道它是这样工作的。请参阅帖子中的测试 3。关键是，如果我理解正确，他希望动态添加 ul。