0

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>
4

1 に答える 1

1

折りたたみ可能なウィジェット用に jQuery Mobile が作成する HTML 構造を上書きしています。更新しようとしている要素の HTML 構造は、<h2>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 構造を考慮して、コードは.ui-btn-text要素内の<h2>要素をターゲットにする必要があります。

例えば：

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

ここにデモがあります: http://jsfiddle.net/XDnGs/

于 2012-10-15T20:18:20.010 に答える