用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"); 
});