Question

我在获取数据之后使用JSON将元素添加到列表中：

success: function(data){          
  var list = $('#' + HTMLfieldName[index] + 'Ul');
  $.each(data, function() {
    newLi = document.createElement('li');
    ref = document.createElement('a');
    ref.innerHTML = this.description;
    ref.href = '#' + this.code;
    newLi.appendChild(ref);
   list.append(newLi);
   });          
}

这很好用，但是列表中的元素显示为普通的href（蓝色和下划线），而不是listview示例中使用的漂亮的CSS。

这是渲染后代码的外观：

<ul class="levelUl ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" name="famUl" id="famUl">
  <li><a href="#2930">Finishing</a></li>
  <li><a href="#2910">Speciality Printing</a></li>
  <li><a href="#2900">Toner</a></li>
</ul>

如果我将该代码粘贴到HTML页面中，它看起来很好。

在将CSS添加到页面后，是否需要执行某些操作来应用CSS？

Answer 1

您必须使用以下命令触发动态添加的列表视图元素的标记增强功能：

$('ul#id').listview('refresh'):

实例：http://jsfiddle.net/Gajotres/LrAyE/

基本上你的代码看起来像这样：

success: function(data){          
    var list = $('#' + HTMLfieldName[index] + 'Ul');
    $.each(data, function() {
        newLi = document.createElement('li');
        ref = document.createElement('a');
        ref.innerHTML = this.description;
        ref.href = '#' + this.code;
        newLi.appendChild(ref);
        list.append(newLi);
    });
    list.listview('refresh');    
}

请记住，您必须在 .listview('refresh'); 循环后调用 each 。

要了解详情，请阅读我的其他 ARTICLE ，或找到 HERE 。

添加列表元素后，将css应用于listview

1 个答案: