JQuery Mobile - 动态计数气泡

Question

我正在创建一个具有列表视图的 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/

基本上，只需为 <li/> 构建 HTML 并附加到列表中，然后调用 .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');
    });
});