jQuery Mobile的ListView控件設計

我已經寫在這裏簡單的ListView的結果： enter image description here jQuery Mobile的ListView控件設計

但它看起來不正確。這是我想爲例子的結果： enter image description here

這裏是我的代碼： 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')); 
    }); 

}

我不明白爲什麼我請得到這個結果任何想法嗎？

預先感謝您

來源

2012-04-27 Amira Manai

哪裏代碼等待jQuery和jQuery Mobile的加載？這是一個問題。查看JQM關於「事件」下的文檔。在這些情況下，JavaScript提供的HTML也將幫助您解決這些問題。（例如Firebug） – Cymbals 2012-04-27 20:11:17

這裏是發生了什麼的簡要說明。 JQM基本上是在添加列表視圖項目之前對內容進行造型。您已經告訴JQM刷新剛添加內容的小部件。後您循環結束運行後追加項目，你必須在你的情況下，所以運行listview('refresh');列表視圖這樣的：

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

來源

2012-04-27 23:55:45 codaniel

抱歉，沒有任何變化 – 2012-04-28 15:58:49

我想你也有一些html錯誤。我測試過這個，是的它確實有效。 – codaniel 2012-04-28 20:44:37

當我把$（「＃artiste」）。listview（'refresh'）;我沒有得到所有的記錄只有第一個 – 2012-04-29 13:38:11

jQuery Mobile的ListView控件設計

回答

相關問題