このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

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:追加した「ボタン」をクリックしてもイベントが発火しない




このエントリーをはてなブックマークに追加




管理人だけが読めるコメントにする(返信はしません)
【お知らせ】
  • コメントは承認制です。反映に時間がかかります。
  • スパムコメント防止のため一部ホストを規制中です。
  • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
  • 記事に直接関係ない個人のトラブルにはお答えできません。
  • Android は使用経験がないので質問を頂いても答えられません。
  • その他詳細はこちら


久しぶりにスクフェスツールズを訪れましたところ、キャラスコア比較の絆pt入力欄がなくなっていましたが何故でしょうか
名無し | 2017/02/28/Tue [EDIT]
現在の仕様では、絆補正は基本ステータスの属性値に含まれています。
絆を別途入力する必要がなくなったので入力欄は廃止しました。
うみの さち | 2017/02/28/Tue [EDIT]



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ