お世話になります。
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>
||<
No.1
4973
2154
こんなふうに、追加した要素に trigger("create") を呼んであげると、良いらしいです。
7
0
$('<input />', {
'type': 'button',
'name':'work_name',
'data-role': 'controlgroup',
'value':'TEST',
'data-theme':'b'
}).appendTo('#work_list').trigger("create");
＃ 質問のコードと似てますが、append を appendTo に変えてます
$('#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
1
回答に追記しました。
2014/07/09 12:43:27a-kuma3さん
2014/07/09 13:07:20追記ありがとうございます。無事動作できました
jquery 1.11.0,jquery-mobile 1.3.1でも問題ありませんでした。
私ももっと回答を見つけ出せるよう試行錯誤すべきでした。