jQuery MobileでリクルートUIをつかって結果をリストビューで表示させたいんだけどCSSが反映させられない件

かなりはまったけど、なんとか解決したのでメモ。

リクルートから供給されている、ホットペッパーAPI用のUIライブラリーとjQuery Mobileを使ってスマートフォン用サイトを作っているのですが、なぜかホットペッパーAPIで返ってくる要素をappendするとjQueryMobileのCSSが反映することができませんでした。

当初、divとかclassの指定の方法か、変なものが効いているのかと思っていろいろ試したのですが解決せず、しばらくして、これは文法じゃなくて、JSが実行されるタイミングが原因なのでは?とおもってしらべていたら、このサイトを発見。

jQuery Mobile の ListView に append した時、スタイルが効かない場合の対応 – bigchu

まさにこちらのとおり、ただ、listview(“refresh”)については、よく理解できなかったのですが、これをいれるとうまくいかなかったので、

ruir.append( ol );
の後に、

ruir.trigger(“create”);
とすることで、無事にサムネイル画像付きのリストビューを表示することができました。

ホットペッパー – リクルート WEBサービス UI Library
ホットペッパー – リクルート WEBサービス UI Library