ajaxで動的にons-col/ons-row生成した時、onsenUIのcssの変更がうまくいかない
Monaca/onsen UIを用いてアプリ開発をしております。
ajaxで動的にons-col/ons-rowをhtmlに追加し、その際、各ons-colにcss要素の追加もしておりますが、cssの適用がうまくいかずに立ち往生しております。
以下がコードになります。
html
<ons-navigator page="top.html" var="app.navi"></ons-navigator>
<ons-template id="top.html">
<ons-page id="top-page">
<ons-list-item modifier="chevron" class="item" id="list_up">
<ons-row>
<ons-col class="title">
<header>
<span class="item-title">リスト</span>
</header>
</ons-col>
</ons-row>
</ons-list-item>
・・・
</ons-page>
</ons-template>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-list>
<ons-list-item>
<div id="list"></div>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
script
(function(){
'use strict';
$(document).on('pageinit', '#top-page', function() {
$('#list_up', this).on('click', function() {
new_list();
app.navi.pushPage('list.html');
});
});
})();
function new_list(){
var data = {・・・}
$.post("url", data).done(function(result){
if (result.res == null){
$('#list').text(該当ありません。);
}
else if (result.res == hit){
var fd = document.createDocumentFragment();
var list = document.getElementById('list');
var onsrowNode = new Array();
var onscolNode = new Array();
var onscolNode2 = new Array();
for (var i=0; i<result.count; i++){
onsrowNode[i] = document.createElement('ons-row');
onscolNode[i] = document.createElement('ons-col');
onscolNode2[i] = document.createElement('ons-col');
onscolNode[i].style.cssText = "width: 100px;";
onscolNode2[i].style.cssText = "width: 100%;";
onscolNode[i].innerText = "項目";
onscolNode2[i].innerText = result.item;
onsrowNode[i].appendChild(onscolNode[i]);
onsrowNode[i].appendChild(onscolNode2[i]);
df.appendChild(onsrowNode[i]);
}
list.appendChild(df);
ons.compile(list);
}
else {
・・・
}
}).fail(function(){
・・・
});
}
なお、こちらはうまくいきませんが、以下のように単純に下線を引くものであれば追加できました。
「onsrowNode[i].style.cssText = "border-bottom-style: dotted;";」
ons-colの幅の設定の仕方が誤っているのかと思いましたが、違うページではうまくcssが効いております。
修正すべき点をご教示頂ければ幸いです。
宜しくお願い申し上げます。