こんにちは、さち です。
先日、「スクフェス ツールズ」をいじっているときに
jQuery Mobile で <select> を動的に追加したかったんですが
上手く行かずハマってしまいました。
一度分かってしまえば納得がいく原因だったんですが
知らなければどうにもならない解決方法でもあったので
今回は、そのことについてまとめておきたいと思います。
問題の症状
jQuery Mobile を利用したこのようなページがあります。
HTML ソースはこんな感じ。
<div class="wrap"> <select> <option value="smile">スマイル</option> <option value="pure" >ピュア</option> <option value="cool" >クール</option> </select> </div> <button>追加</button>
続いて、下記のような jQuery(JavaScript) を作りました。
「追加」ボタンをクリックすると <select> が追加されます。
$('button').click(function() { //selectのクローンを作成 var $sel = $('select:first').clone(); //HTMLにselect要素を追加 $('.wrap').append($sel); });
「追加」ボタンをクリックした結果はこのとおり。
<select> は追加されたけれど jQuery Mobile が反映されていない状態。
解決方法
解決する方法は簡単でした。
<select> を HTML に追加する時に「.trigger('create')」を追記するだけです。
$('button').click(function() { //selectのクローンを作成 var $sel = $('select:first').clone(); //HTMLにselect要素を追加 $('.wrap').append($sel).trigger('create'); });
これで、jQuery Mobile が反映した状態で <select> が追加されます。
ちなみに、append() の代わりに appendTo() を使ってこのように書くことはできません。
//OK $('.wrap').append($sel).trigger('create'); //NG $sel.appendTo('.wrap').trigger('create'); $sel.trigger('create').appendTo('.wrap');
問題の原因
<select> などの jQuery Mobile 特有のスタイルは
JavaScript により作られていて
この作業はページを開いた直後に行われます。
そのため、後で要素を追加するだけではスタイルが反映されません。
この症状は <select> 以外に <input> や <button>
さらに、listview を適用した <ol> や <ul> の <li> などでも発生します。
要素を動的に追加する際は注意しましょう。
理屈が分かれば今後同じ間違いをすることはないでしょうね。
【関連記事】
コメント
久しぶりにスクフェスツールズを訪れましたところ、キャラスコア比較の絆pt入力欄がなくなっていましたが何故でしょうか
現在の仕様では、絆補正は基本ステータスの属性値に含まれています。
絆を別途入力する必要がなくなったので入力欄は廃止しました。