jquerymobile ajaxでDOM要素を挿入する場合の初期化処理

jquerymobileでは、data属性にいろいろ指定しておいたHTMLを用意することで、自動的にスタイルなどが適応されて表示される。 いろんなclass属性が負荷されたspanタグがいっぱい作られる。

ajaxで取得したDOM要素を、ページに追加した場合、そのままだと、ページ初期化時に適応されたようなスタイルが適応されない。 言い換えると、ごてごてしたspanタグが付加されない。

ListViewのスタイルを適応させるには、よくある問題のようで、少し検索すると、エレメントのlistview(‘refresh’)メソッドを呼べばいいというのがhitする。

今回は、ListViewの中にあるボタン類のスタイルが適応されなかったので困って調べた。

<a data-role="button">hoge</a>

上のような単純な例の場合は、$(‘hoge‘).button() で間に合うようですが、 下のような比較的複雑なボタンだとメソッド呼出しでのスタイル適応もできない。

   <div data-role="controlgroup" data-type="horizontal">
     <a data-role="button" class="favorite" data-ajax="false" data-icon="favorite" data-iconpos="notext" data-theme="c" data-inline="true">fav</a>
     <a data-role="button" class="retweet" data-ajax="false" data-icon="retweet" data-iconpos="notext" data-theme="c" data-inline="true">RT</a>
   </div>

jQuery Mobile Docs – Scripting pages

$( …new markup that contains widgets… ).appendTo( “.ui-page” ).trigger( “create” );

$(html_string_by_ajax).appendTo( ".ui-page" ).trigger( "create" );

k

これで、通常のページ初期化と同じ処理が走ってくれるようで、ajaxで取得したDOM要素を挿入した時にも、スタイルが適応されました。

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.