jQM listview（'refresh'）;是打破插圖列表

Question

我似乎無法找出爲什麼發生這種情況：我在jQuery Mobile的一個無序列表與data-inset="true"，當它第一次使得它看起來與圓潤的頂部和底部完美的罰款。但是，在向列表動態添加新元素並在其上調用listview('refresh')之後，它將呈現爲非插入列表。

更新：只有在不在當前活動頁面上的列表上調用listview('refresh');時纔會發生這種情況。當你轉到帶有列表的頁面時，列表視圖將更新爲與插入列表相關的所有樣式，除了頂部和底部的圓角以外。要重現此錯誤使用本：http://jsfiddle.net/94X7S/10/

下面是在列表中的HTML看起來像前調用.listview('refresh');

<ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> 
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined"> 
     User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span> 
    </li> 
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"> 
     <div class="ui-btn-inner ui-li" aria-hidden="true"> 
      <div class="ui-btn-text"> 
       <a href="#reviews" class="ui-link-inherit"> 
        <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3> 
        <p class="ui-li-desc">Review Content...</p> 
       </a> 
      </div> 
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/> 
     </div> 
    </li> 
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom"> 
     <div class="ui-btn-inner ui-li" aria-hidden="true"> 
      <div class="ui-btn-text"> 
       <a href="#reviews" class="ui-link-inherit"> 
        <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3> 
        <p class="ui-li-desc">Review Content...</p> 
       </a> 
      </div> 
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/> 
     </div> 
    </li> 
</ul> 

這裏是什麼在列表中的HTML看起來像以後打電話.listview('refresh'); <

ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> 
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b"> 
     User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span> 
    </li> 
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"> 
     <div class="ui-btn-inner ui-li" aria-hidden="true"> 
      <div class="ui-btn-text"> 
       <a href="#reviews" class="ui-link-inherit"> 
        <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3> 
        <p class="ui-li-desc">Review Content...</p> 
       </a> 
      </div> 
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/> 
     </div> 
    </li> 
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"> 
     <div class="ui-btn-inner ui-li" aria-hidden="true"> 
      <div class="ui-btn-text"> 
       <a href="#reviews" class="ui-link-inherit"> 
        <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3> 
        <p class="ui-li-desc">Review Content...</p> 
       </a> 
      </div> 
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/> 
     </div> 
    </li> 
</ul> 

請注意，第一個和最後一個<li>上的某些類在listview('refresh'); - i有沒有理由發生這種事情，或者有什麼可以做的，以防止這種情況發生？任何幫助，將不勝感激。

Answer 1

我明白你的意思，當導航到第二頁。一個變通辦法是隻refresh的listview元素時，頁面他們在實際顯示：

$('.add').click(function(){ 

    //you can combine selectors by adding a comma in-between them 
    $('#1, #2').append('<li>' + count + '</li>'); 

    //refresh the listview on the current page (if it exists) 
    $(this).closest('.ui-content').find('.ui-listview').listview('refresh'); 

    count++; 
}); 

$('[data-role="page"]').bind('pageshow', function() { 

    //refresh the listview on the current page (if it exists) 
    $(this).find('.ui-listview').listview('refresh'); 
}); 

這裏是一個演示：http://jsfiddle.net/94X7S/12/