jQuery mobile で動的にフォームを追加しようとして、ハマった。
あるボタンのクリックイベントで、radio ボタン選択を追加、
$("input[type='radio']").checkboxradio("refresh");
だけで、できなくて、
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
と怒られた。chromeブラウザでしか試してないのだが、
$("input[type='radio']").checkboxradio();
を前に実行しておいてから、
$("input[type='radio']").checkboxradio("refresh");
を実行すると成功する。他の入力項目もありページ初期化したくなくて、あるボタンのクリックイベントで
radio ボタンを追加したいのである。
まだ、端末デバイスで試していないので、どうなのか解らないのだが。。。
さらに、静的に書く場合 controlgroup でまとめる時は、以下のように fieldset タグで書いていて良いのだが、
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Q1 Answer</legend>
<input type="radio" name="answer" id="answer_a" value="A" checked="checked">
<label for="answer_a">A</label>
<input type="radio" name="answer" id="answer_b" value="B">
<label for="answer_b">B</label>
<input type="radio" name="answer" id="answer_c" value="C">
<label for="answer_c">C</label>
</fieldset>
動的に表示する場合は、このように fieldset タグを書くのではなく代わりに、
<div data-role="controlgroup" data-type="horizontal"> </div>
で書かかないと、以下のようになってしまう。
それから、動的に追加したオブジェクトに対して、
.trigger("create");
を実行する。