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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Notepad++:テキストファイルのバックアップを自動作成する (09/25)
  • 「ソフトバンク」から「格安SIM」に乗り換えてみた【後編】 (09/22)
  • iPhone:「iOS 11」にしたらすぐ設定した方が良いことまとめ (09/20)
  • 「ソフトバンク」から「格安SIM」に乗り換えてみた【前編】 (09/18)
  • 新型 iPhone 「X」「8」 と 「7」 の違いをまとめてみた (09/13)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

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









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




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


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



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

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

    ブログパーツ