JQuery Mobile - 動態計數泡泡

Question

我正在創建一個具有listview的JQuery Mobile應用程序。我正在使用Web服務的結果填充該列表視圖。正因爲如此，在列表視圖中的項目被填充如下所示：

$.each(results, function (i, result) { 
    var s = "<li><h2 style='padding-left:40px;'>" + result.title + "</h2><p style='padding-left:40px;'>"; 
    s += result.subTitle; 
    s += "</p><span class='ul-li-count'>" + result.count + "</span></li>"; 

    $("#resultListView").append(s); 
}); 
$("#resultListView").listview("refresh"); 

我的列表視圖被正確填充。計數泡泡的值正在顯示。但是，UI不會渲染泡泡。有沒有辦法在列表視圖中動態構建一個包含計數泡泡的結果集？如果是這樣，怎麼樣？

謝謝！

Answer 1

你的方式應該工作。我能想到的唯一的事情就是HTML無效。

無論如何，我創建了一個簡單的版本來表明它是可能的。 http://jsfiddle.net/kiliman/HDUqp/

基本上，剛建立的HTML <li/>並添加到列表中，然後調用.listview('refresh')

$('#page1').bind('pageinit', function(e, data) { 
    var n = 0; 
    $('#addResult').click(function(e) { 
     var $list = $('#resultListView'); 

     n++; 
     $('<li/>') 
      .append($('<h2>', { text: 'Title ' + n })) 
      .append($('<p>', { text: 'SubTitle ' + n })) 
      .append($('<span />', { text: n, class: 'ui-li-count'})) 
      .appendTo($list); 
     $list.listview('refresh'); 
    }); 
});