Question

我想用jquery mobile动态生成一个listview。我有这个代码，但.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，则刷新会很好地格式化listview。

测试＃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>

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

Answer 1

如果你不想在HTML中使用空的UL标签，你可以尝试调用.trigger（'create）方法而不是.listview（“refresh”）;

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

所以，基本上，而不是

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

试

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

或

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

祝你好运。

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

Answer 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>

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

2 个答案: