jQuery Mobile：追加した要素（select等）にスタイルが付かない

こんにちは、さち です。

先日、「スクフェス ツールズ」をいじっているときに
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> などでも発生します。
要素を動的に追加する際は注意しましょう。

理屈が分かれば今後同じ間違いをすることはないでしょうね。

【関連記事】

→ jQuery：追加した「ボタン」をクリックしてもイベントが発火しない