應用CSS添加列表元素後的ListView

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。