jQuery Mobileでlistviewに動的にエレメントを追加する

jQuery Mobileってあるじゃないですか。
あれってHTMLのdata属性を見て、勝手に要素に色々属性つけて見栄え良くするんですけど、$(jQuery).append()とかで属性を付与すると、付与した属性には当然そういった処理はやってくれないんで、追加した属性だけみすぼらしくなります。

たとえば

<section data-role="page" data-iscroll="enable" id="list">
<div class="content" data-role="content" data-iscroll="scroller" id="scroll_list">
<ul data-role="listview">
</ul>
</div>
</section>

みたいのがあったとして、

こいつに

$page = $("#list");
$list = $page.find(".content ul");
$list.append("<li>あああああ</li>");

とかってやっても、当然

<li>

が足されるだけで、自動的に

<li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c">

になってくれるわけではありません。

で、listviewの場合は$listに対して.listview()を呼び出せば良いわけなんですが、

$page = $("#list");
$list = $page.find(".content ul");
$list.append("<li>あああああ</li>");
$list.listview();

これが何故か上手くいかない。

何でかと思ってjQueryMobileのドキュメントを読んでたら

スクリプトからリストにアイテムを追加した後は refresh() メソッドを呼んで明示的にスタイルを更新してやる必要があります。

orz

これってもしかして1.0からなのかしら？

$page = $("#list");
$list = $page.find(".content ul");
$list.append("<li>あああああ</li>");
$list.listview("refresh");

これで解決！