Ajaxなどで追加したHTML要素に対してjQuery mobileのスタイルを再適用する方法を探しています。
Stack OverFlowに似たような質問があったので、その回答通りにしてみたのですがうまく来ませんでした。
StackOverFlow
今回テストで作ったHTMLの内容は以下の通りです。(metaタグなどは省略しています。)
html
1 <head> 2 <link rel="stylesheet" type="text/css" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 3 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> 4 <script type="text/javascript"> 5 $(function(){ 6 //ボタンが押されたら要素を追加 7 $('button.add').click(function(){ 8 //.trigger('create')でスタイルが適用されるはず・・・ 9 $('ul').append('<li>Add</li><li>Add</li><li>Add</li>').trigger('create'); 10 }); 11 }); 12 </script> 13 <script type="text/javascript" src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 14 15 </head> 16 <body> 17 <div id="index" data-role="page" > 18 <header data-role="header" data-theme="b"> 19 <h1>メイン</h1> 20 </header> 21 <article> 22 <!-- このボタンを押すとリストを追加する --> 23 <button class="add">btn</button> 24 <!-- ListView本体 --> 25 <ul data-role="listview"> 26 <li>List</li> 27 <li>List</li> 28 <li>List</li> 29 </ul> 30 </article> 31 </div> 32 </body>
ボタンを押したあとのリストビューは以下の状態です。
※Chrome Developer Toolで確認
html
1<ul data-role="listview" class="ui-listview"> 2 <li class="ui-li-static ui-body-inherit ui-first-child">List</li> 3 <li class="ui-li-static ui-body-inherit">List</li> 4 <li class="ui-li-static ui-body-inherit ui-last-child">List</li> 5 <li>Add</li><li>Add</li><li>Add</li></ul>
あなたの回答
tips
プレビュー