22098


アプリ開発初心者です。  
monaca, onsen UIを使用して開発をしております。

具体的には、ajaxを使ってデータベースにアクセスし、値の取り出しに成功した場合は指定したタグに要素を追加して表示させるといったプログラムを組もうとしております。  
値の取り出しに成功して表示するまではうまくいくのですが、動的にタグに要素を追加した場合、onsen
UIで設定してあるcssがうまく効かず、ただ文字列が列挙されてしまいます。  
動的に追加した要素に予め設定してあるcssを適用させるにはどのようにしたら良いのか、ご挙示頂ければ幸いです。  
よろしくお願い申し上げます。

以下が該当するコードになります。

scriptタグ内

[code]

    (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){
    　　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(){
    　　・・・
    　});
    }
    
[/code]

以下body内

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-02-14T09:41:28.203
22065
2016-02-15T06:24:49.613
2016-02-15T04:57:55.487
3516
14300
question
monaca onsen-ui ajax
ajaxで要素を動的に追加した際に、onsen UIのcssが効かない


OnsenUI の `<ons-xxx>` といったコンポーネントは、実際にはより多くのタグや属性で構成されています。将来的には Custom
Elements という形でブラウザが直接サポートすることになるようですが、現状では Javascript
を使ってコンポーネントの定義を展開する必要があります。

[code]

    <!-- ons.compile前 -->
    <ons-button>Push Page</ons-button>
    
    <!-- ons.compile後 -->
    <ons-button class="ng-isolate-scope button effeckt-button slide-left">
      <span class="label ons-button-inner"><span class="ng-scope">Push Page</span></span>
      <span class="spinner button__spinner "></span>
    </ons-button>
    
[/code]

最初からHTMLに書かれているものは `ons.bootstrap()` 時にこの処理が行われますが、後から追加した要素については
`ons.compile()` を使って手動で行う必要があります。

[code]

    ons.bootstrap();
    ons.ready(function(){
      var outer = document.getElementById('hoge');
      
      var btn1 = document.createElement('ons-button');
      btn1.innerHTML = 'without compile()';
      outer.appendChild(btn1);
      
      var btn2 = document.createElement('ons-button');
      btn2.innerHTML = 'with compile()';
      outer.appendChild(btn2);
      ons.compile(btn2); // compileはappendChildしてから
    })
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
    
    <ons-navigator>
      <ons-page>
        <div id="hoge"></div>
      </ons-page>
    </ons-navigator>
[/code]

参考 [AngularJSを意識せずにOnsen UIを扱う - Onsen UI
Guide](http://ja.onsen.io/guide/overview.html#UsingOnsenUIwithjQueryorwithanyJSframeworks)


CC BY-SA 3.0
2016-02-15T06:24:49.613
22098
2016-02-15T06:24:49.613
8000
22065
answer