在Ajax调用中使用jquery mobile样式显示动态li

我有左侧ul和右侧ul。当我单击左侧的li在该ajax调用中进行ajax调用时，我在右侧的ul中添加了一个动态li。内容即将发布，但jquery移动版设计缺失。我搜索了一下，找到了一个类似add

$（“#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>

我试过了，但也没用

在我的页面中，我有以下内容

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

有什么建议吗？

试试这个

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

---

使用相同的方式（没有jquerymobile风格），我只将其作为容器编写。没有jquery移动风格的li即将到来。这并不使用我在unit_detail.erb中提到的数据主题=“b”，class=“ui-grid-b”

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