[英]listview('refresh') not working jqm 1.2
當我在jquery mobile 1.2中動態更改可折疊列表的h2內容時,h2標簽會失去其格式。
調用listview('refresh')似乎無法解決。
有任何想法嗎?
<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>
您正在覆蓋jQuery Mobile為可折疊窗口小部件創建的HTML結構。 從jQuery Mobile初始化后,要嘗試更新的<h2>
元素的HTML結構如下所示:
<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"> </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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.