質問編集履歴

1 コード整形

teratech

teratech score 17

2017/05/22 16:30  投稿

ajaxで要素を動的に追加した際に、onsen UIのcssが効かない
アプリ開発初心者です。
monaca, onsen UIを使用して開発をしております。
具体的には、ajaxを使ってデータベースにアクセスし、値の取り出しに成功した場合は指定したタグに要素を追加して表示させるといったプログラムを組もうとしております。
値の取り出しに成功して表示するまではうまくいくのですが、動的にタグに要素を追加した場合、onsen UIで設定してあるcssがうまく効かず、ただ文字列が列挙されてしまいます。
動的に追加した要素に予め設定してあるcssを適用させるにはどのようにしたら良いのか、ご挙示頂ければ幸いです。
よろしくお願い申し上げます。
以下が該当するコードになります。
scriptタグ内
```Javascript
(function(){
'use strict';
$(document).on('pageinit', '#top-page', function() {
 $('#list_up', this).on('click', function() {
  new_list();
  app.navi.pushPage('list.html');
$(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){
 var list = document.getElementById('list');
 var onsrowNode = document.createElement('ons-row');
 var onscolNode = document.createElement('ons-col');
 var onscolNode2 = document.createElement('ons-col');
 var textNode = document.createTextNode('温泉');
 var textNode2 = document.createTextNode(result);
 onscolNode.appendChild(textNode);
 onscolNode2.appendChild(textNode2);
 onsrowNode.appendChild(onscolNode);
 onsrowNode.appendChild(onscolNode2);
 list.appendChild(onsrowNode);
  var list = document.getElementById('list');
  var onsrowNode = document.createElement('ons-row');
  var onscolNode = document.createElement('ons-col');
  var onscolNode2 = document.createElement('ons-col');
  var textNode = document.createTextNode('温泉');
  var textNode2 = document.createTextNode(result);
  onscolNode.appendChild(textNode);
  onscolNode2.appendChild(textNode2);
  onsrowNode.appendChild(onscolNode);
  onsrowNode.appendChild(onscolNode2);
  list.appendChild(onsrowNode);
}).fail(function(){
 ・・・
  ・・・
});
}
以下body内
(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)
```
```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-page>
</ons-template>
(ons-template id="list.html")
(ons-page id="list-page")
 (ons-list)
  (ons-list-item)
   (div id="list")
   (/ons-list-item)
 (/ons-list)
(/ons-page)
(/ons-template)
<ons-template id="list.html">
<ons-page id="list-page">
 <ons-list>
  <ons-list-item>
   <div id="list">
   </ons-list-item>
 </ons-list>
</ons-page>
</ons-template>
```
  • Ajax

    2148 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Onsen UI

    450 questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

  • Monaca

    1524 questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る