用Ajax調用jquery移動樣式顯示動態li

Question

我有左側ul和右側ul。當我點擊左側li在ajax調用中進行ajax調用時，我在右側添加了一個動態li。內容即將到來，但jquery移動設計失蹤。我搜索了我得到了一個解決方案，如添加$("#ul_id").listview('refresh')，但它不適合我。

$.post('/app/Unit/unit_detail', {item_id : task_id}, 
    function(data){ 
    $('#right_ul').html(data); 
    $("#right_ul").listview('refresh'); 
}); 

在我unit_detail.erb我有下面的代碼

<li class="showDetails" style="list-style:none;" data-theme="b"> 
    <a href="#"> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"><div><%= unit_detail.name %></div></div> 
     <div class="ui-block-b"><div><%= unit_detail.description %> </div></div> 
     <div class="ui-block-c"><div><%= unit_detail.accessories %> </div></div> 
    </div> 
    </a> 
</li> 

在一些地方，我發現先找到UL在div的ID，並刷新列表視圖

$("#rigth_pane_content_footer").find("#right_ul").listview('refresh'); 

我試過也沒有工作。

在我的網頁我有以下

<div id="rigth_pane_content_footer"> 
    <ul data-role="listview" id="right_ul">  
    </ul> 
</div> 

有什麼建議？

Answer 1

試試這個

$.post('/app/Unit/unit_detail', {item_id : task_id}, 
function(data){ 
    var container = document.getElementById('right_ul'); 
    var new_element = document.createElement('li'); 
    new_element.innerHTML =data; 
    container.appendChild(new_element); 
    $(container).listview("refresh"); 
});