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');