人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>
||<

●質問者: teioh12
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

こんなふうに、追加した要素に 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 ですが、同じ動きをすると思います。


teioh12さんのコメント
a-kuma3さん ご回答ありがとうございます 提供頂いたソースに変えたみたのですが、追加される[TEST}ボタンのみ 通常のスタイルで表示されてしまいました。 ソースではなく環境の問題でしょうか 当方Chrome 35.0.1916.153 mです

a-kuma3さんのコメント
回答に追記しました。

teioh12さんのコメント
a-kuma3さん 追記ありがとうございます。無事動作できました jquery 1.11.0,jquery-mobile 1.3.1でも問題ありませんでした。 私ももっと回答を見つけ出せるよう試行錯誤すべきでした。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ