【問題】
jQueryMobileで、動的に生成した構造物が、
用意しているjQueryMobileのCSSに乗らない。
(参考)
<script src="jquery.js"></script> <script src="jquery.mobile.js"></script> <link rel="sytlesheet" href="jquery.mobile.css"/> <script> $("#create").click(function(){ $("#hogehoge").append("<li>hoge_newly_created</li>"); }); </script> </head> <body> <ul data-role="listview" id="hogehoge"> <li>hoge01</li> <li>hoge02</li> </ul> <div data-role="button" id="create">CREATE</div>
【原因】
jQueryの仕様として、HTMLを読み込んだ後にCSSセレクタを判別して
動作やCSSを割り振っていく。したがって、
HTML読み込み→jQuery割当→動的に生成したタグ（※jQueryに乗らない！）
となる。
【解決】
scriptの内容を
$("#create").click(function(){
$("#hogehgoe").append("<li>hoge_newly_created</li>");
$("ul").listview('refresh');
});
とした。
【補足】
動的に生成する構造物のdata-roleによって、
プロパティは色々↓
http://dev.screw-axis.com/doc/jquery_mobile/components/forms/basics/
DRY
