読者です 読者をやめる 読者になる 読者になる

jQuery mobile radio を動的に追加する時

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"); 
を実行する。