pageinitが機能しない

###前提・実現したいこと
Monacaでアプリを作っています。
ページ読み込み後にDOM操作すべく、以下のようなコードを組んでおりますが、機能しておりません。
今までは問題なく機能していたのですが、onsen ui2に変えたところ動かなくなりました。これは関係あるのでしょうか？
ご教示頂ければ幸いです。

###該当のソースコード

javascript
1(function (){
2    $(document).on('pageinit', '#sample_page', function() {
3        $("#target_id").text("書き換え");
4    });
5})();

html
1<body>
2    <ons-navigator page="tab.html" var="navi"></ons-navigator>
3    <ons-template id="tab.html">
4        <ons-page>
5            <ons-tabbar var="tabbar">
6                <ons-tab page="sample1.html" label="サンプル1" active="true" no-reload></ons-tab>
7                <ons-tab page="sample2.html" label="サンプル2" no-reload></ons-tab>
8            </ons-tabbar>
9        </ons-page>
10    </ons-template>
11  
12    <ons-template id="sample1.html">
13        <ons-page id="sample_page">
14            <p id="target_id">サンプルです</p>
15        </ons-page>
16    </ons-template>

行動規範の内容に同意します

回答2件

jQueryは読み込まれていますか？
読み込まれた後の処理ですか？

javascript
1ons.ready(function(){
2  $(document).on('pageinit', '#sample_page', function() {
3    $("#target_id").text("書き換え");
4  });
5})

投稿2017/07/13 08:50

namimon

総合スコア726

teratech

2017/07/13 08:55

ご回答頂きまして、ありがとうございます。 onsen ui2にアップデートした際に、componentの追加に不足があったようです。初心者で詳細よく分かっていませんが、"components/monaca-onsenui/js/angular-onsenui.min.js"を追加したところ、ちゃんと動きました。