listview（'refresh'）不工作jqm 1.2

Question

當我動態更改jQuery Mobile 1.2中可摺疊列表的h2內容時，h2標籤會丟失它的格式。

調用listview（'刷新'）似乎並沒有解決它。

任何想法？

<div id="mylist" data-role="collapsible" data-theme="a" data-content-theme="a" data-mini="true" > 
<h2>Choose...</h2> 
<ul data-role="listview"> 
<li data-mini="true"><a href="#">Item 1</a></li> 
<li data-mini="true"><a href="#">Item 2</a></li> 
<li data-mini="true"><a href="#">Item 3</a></li> 
</ul> 
</div> 

<script> 
$("#mylist li").live('click',function(event){ 

$("#mylist h2").text($(this).text()); 
$("#mylist").listview('refresh'); 

}); 
</script> 

Answer 1

您正在覆蓋jQuery Mobile爲可摺疊小部件創建的HTML結構。您正在嘗試更新的<h2>元素的HTML結構看起來像這樣從jQuery Mobile的初始化後：

<h2 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> 
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-mini ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-up-a" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="a" data-mini="true"> 
     <span class="ui-btn-inner ui-corner-top ui-corner-bottom"> 
      <span class="ui-btn-text"> 
       Choose... 
       <span class="ui-collapsible-heading-status"> click to expand contents</span> 
      </span> 
      <span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span> 
     </span> 
    </a> 
</h2> 

因此，採取這種HTML結構的考慮，你的代碼應該針對<h2>元素中的.ui-btn-text元素。

例如：

$(document).on('click', "#mylist li", function(event){ 
    $("#mylist h2 .ui-btn-text").text($(this).text()); 
});​ 

這裏是一個演示：http://jsfiddle.net/XDnGs/