jQueryMobileでJavaScript上で追加したhtmlのUIを初期化
■やりたいこと
検索フォームで入力し、結果をcheckboxのリストとして追加
jQueryMobileのスタイルも反映したい!
■対策
検索の結果をcheckboxリストとしてlistviewに表示、checkboxを画面に追加する場合、
jQueryMobileのスタイルがうまく反映されず、標準UIのまま表示されました。
しかも、タップしてチェックが付く範囲がlabelになってしまうため、
一見ボタンがデバイスの横幅いっぱいに広がっていてもラベルの表示部分でしかチェックしてくれませんでした。
そういう時にcreateイベントをtriggerすると、初期化を行ってくれます。
・HTML
... <div id="checkList" data-role="fieldcontain"></div> ...
var str += '<fieldset data-role="controlgroup">'; for (var i = 0; i < [結果の件数]; i++) { //結果の件数分inputとlabelを追加 str = str + '<input type="checkbox" name="check' + i + '" id="check' + i + '" />' + '<label for="check' + i + '">結果' + i + '</label>'; } str += '</fieldset>'; //いったん消す $('#checkList').children().remove(); //チェックリストの更新と初期化 $('#checkList').html(str).trigger('create');
listviewを使う場合は、trigger('create').listview('refresh'); のようにリフレッシュするといけました。