jquery - Jquery Mobile ListView 设计

Question

我写了一个简单的 listView 这是结果：

但它看起来不正确。这是我想要的结果，例如：

这是我的代码：html：

<div data-role="page" id="home">

    <div data-role="header">
        <h1>Players</h1>
    </div>

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

</div>

js+jquery：

function querySuccess(tx, results){
    var len = results.rows.length;
    var dataset= results.rows;

    $("#artiste").empty();

    for (var i = 0; i < len; i++){
        item = dataset.item(i);

        $("#artiste").append( "<li data-theme='c' data-name='"+item['firstName']+"'><a  rel='external' href='game.html'><img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );

    } 


    $('#artiste').children('li').on('click', function (){
        alert('Selected Name=' + $(this).attr('data-name'));
    });  

}

我不明白为什么我得到这个结果有什么想法吗？

先感谢您

Answer 1

这是对发生的事情的简要说明。JQM 基本上是在添加列表视图项之前对内容进行样式设置。您已告诉 JQM 刷新您刚刚添加内容的小部件。将项目附加到列表视图后，您必须listview('refresh');在 for 循环完成后运行所以在您的情况下运行：

$("#artiste").listview('refresh');