0

我想用 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>

有人有解决这个问题的想法吗？

4

2 回答 2

1

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

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

所以，基本上，而不是

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

尝试

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

或者

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

祝你好运。

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

于 2012-11-23T16:44:39.640 回答
0

第一个不起作用，因为您也附加了 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>
于 2012-11-23T16:40:50.477 回答