jqueryでの動的html作成のボタン


お世話になります。
jqueryにて動的にボタンを追加させているのですが
追加したボタンにjquery-mobileのスタイルが適用されません。
元から配置しているボタンには適用されます

>|html|
<html>
<head>
 <link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css" />
 <script src="js/jquery-1.11.1.min.js"></script>
 <script src="js/jquery.mobile-1.3.1.min.js"></script>
 <script type="text/javascript" charset="UTF-8">
  $(function(){
   $("#button2").click(function(){
    $('#work_list').append($('<input />', {
     'type': 'button',
     'name':'work_name',
     'data-role': 'controlgroup',
     'value':'TEST',
     'data-theme':'b'
    }));
   });
  });
 </script>
</head>
<body>
 <div id="button2" data-role="button" data-inline="true">保存</div>

 <div id="work_list"style="height:550px;overflow-y:scroll;overflow-x:hidden;">
  <input type="button" name="work_name" value="aa" data-theme="b" />
  <input type="button" name="work_name" value="bb" data-theme="b"/>
 </div>
</body>
</html>
||<

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/07/09 10:16:21
  • 終了:2014/07/09 13:07:35

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4504ベストアンサー獲得回数18702014/07/09 10:57:47

こんなふうに、追加した要素に trigger("create") を呼んであげると、良いらしいです。

    $('<input />', {
        'type': 'button',
        'name':'work_name',
        'data-role': 'controlgroup',
        'value':'TEST',
        'data-theme':'b'
    }).appendTo('#work_list').trigger("create");

# 質問のコードと似てますが、append を appendTo に変えてます




追記です。

追加したボタンの要素にではなく、ボタンを追加した領域に trigger("create") したら反映されました。
というわけで、質問のコードの append に続けて、trigger("create") です。

    $('#work_list').append($('<input />', {
        'type': 'button',
        'name':'work_name',
        'data-role': 'controlgroup',
        'value':'TEST',
        'data-theme':'b'
    })).trigger("create");  // ★これ

何事も試してみなきゃ、駄目ですね X-(
jsFiddle で試したのがこちら。
http://jsfiddle.net/a_kuma3/fQb9r/

試すときに使ったのは jquery 1.11.0 + jquery-mobile 1.4.3 ですが、同じ動きをすると思います。

他1件のコメントを見る
id:a-kuma3

回答に追記しました。

2014/07/09 12:43:27
id:teioh12

a-kuma3さん
追記ありがとうございます。無事動作できました
jquery 1.11.0,jquery-mobile 1.3.1でも問題ありませんでした。

私ももっと回答を見つけ出せるよう試行錯誤すべきでした。

2014/07/09 13:07:20

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません