前提・実現したいこと

Monacaでwebアプリを作成しています．
ons-splitterとons-navigatorの組み合わせで画面遷移を実装し，pushPageで<ons-page>を読み込んだ際，動的にコンテンツを書き換えることが目的で，以下の内容を試しました．

<ons-page id="test"> 〜〜〜 </ons-page>

で予め用意したページに対しjQueryでpageinitを監視し，ページ読み込み時に処理を行います．

ons.ready(function(){
$(document).on('pageinit','#test',function(){
alert('test');
})
});

困っていることは，イベントリスナーを設定してもpageinitが発火せずに<ons-page id='test'>が読み込まれることです．
上記コードのpageinitをclickに書き換えると，問題なくタッチでalertが実行されます．

pageinitが発火しない原因，またその解決策をご教授いただけないでしょうか．

フレームワークは
Onsen UI V2 JS Splitter
ライブラリーは
jQuery(Monaca Version)バージョン 3.3.1
Monaca Core Utility バージョン 2.0.7
Cordova(PhoneGap)Loader バージョン1.0.0
を用いています．

teratail初心者です．
作法等，至らぬところがあるかとは存じますが，ご教授いただければ幸甚です．
よろしくお願い申し上げます．

#当該のコード

html
1<html>
2<head>
3  <meta charset="utf-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
5  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
6  <script src="components/loader.js"></script>
7  <script src="lib/onsenui/js/onsenui.min.js"></script>
8
9  <link rel="stylesheet" href="components/loader.css">
10  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
12  <link rel="stylesheet" href="css/style.css">
13
14  <script>
15    ons.ready(function() {
16      console.log("Onsen UI is ready!");
17      $(document).on('pageinit','#test',function(){
18        alert('test');
19      })
20    });
21
22    window.fn = {};
23    window.fn.open = function() {
24      var menu = document.getElementById('menu');
25      menu.open();
26    };
27
28    window.fn.navigation  = function (page) {
29      var navigator = document.getElementById("navigator");
30      if (navigator) {
31        navigator.pushPage(page, { animation: "slide" });
32      }
33    };
34
35    if (ons.platform.isIPhoneX()) {
36      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
37      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
38    }
39  </script>
40</head>
41<body>
42  <ons-splitter>
43    <ons-splitter-side id="menu" side="left" width="220px" collapse swipe-target-width="50px" swipeable>
44      <ons-page>
45        <ons-list>
46           <ons-list-item onclick="fn.navigation('test.html');" tappable class="menu_list_item">
47            <i class="fa fa-home"></i>
48             <span class="menu_list">テストページ</span>
49            <div class="menu_list_favicon"><i class="fa fa-angle-right"></i></div>
50          </ons-list-item>
51        </ons-list>
52      </ons-page>
53    </ons-splitter-side>
54    <ons-splitter-content id="content">
55      <ons-navigator id="navigator" page="home.html"></ons-navigator>
56    </ons-splitter-content>
57  </ons-splitter>
58
59  <ons-template id="home.html">
60  <ons-page>
61   <div class="center">
62    トップページ
63   </div>
64  </ons-page>
65  </ons-template>
66
67  <ons-template id="test.html">
68  <ons-page id="test">
69    <ons-toolbar>
70      <div class="left">
71        <ons-toolbar-button onclick="fn.open()">
72          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
73        </ons-toolbar-button>
74      </div>
75      <div class="center">
76        テストページ
77      </div>
78    </ons-toolbar>
79  </ons-page>
80  </ons-template>
81
82</body>
83
84</html>
85

試したこと

・jQuery 2系に変更し試しましたがダメでした．
・こちらの記事を参考にonsen ui2を追加しcomponentを設定しましたがダメでした．

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

回答1件

ベストアンサー

OnsenUIで用意されているイベントで対応したのを記載します

  // OnsenUIのイベントで呼び出してもらう
  // https://ja.onsen.io/v2/api/js/ons-navigator.html

の部分になります

html
1<html>
2<head>
3  <meta charset="UTF-8">
4  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
5  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
6  <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
7  <script src="https://code.jquery.com/jquery-3.0.0.slim.min.js"></script>
8  <title>OnsenUI</title>
9
10  <script>
11    ons.ready(function() {
12      console.log("Onsen UI is ready!");
13      
14      // OnsenUIのイベントで呼び出してもらう
15      // https://ja.onsen.io/v2/api/js/ons-navigator.html
16      var myNavigator = document.getElementById('navigator');
17      myNavigator.addEventListener('postpush', function(page){
18        if(page.enterPage.id == 'test') {
19          alert('test');
20        }
21      });
22    });
23
24    window.fn = {};
25    window.fn.open = function() {
26      var menu = document.getElementById('menu');
27      menu.open();
28    };
29
30    window.fn.navigation  = function (page) {
31      var navigator = document.getElementById("navigator");
32      if (navigator) {
33        navigator.pushPage(page, { animation: "slide" });
34      }
35    };
36
37    if (ons.platform.isIPhoneX()) {
38      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
39      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
40    }
41  </script>
42</head>
43<body>
44  <ons-splitter>
45    <ons-splitter-side id="menu" side="left" width="220px" collapse swipe-target-width="50px" swipeable>
46      <ons-page>
47        <ons-list>
48           <ons-list-item onclick="fn.navigation('test.html');" tappable class="menu_list_item">
49            <i class="fa fa-home"></i>
50              <span class="menu_list">テストページ</span>
51            <div class="menu_list_favicon"><i class="fa fa-angle-right"></i></div>
52          </ons-list-item>
53        </ons-list>
54      </ons-page>
55    </ons-splitter-side>
56    <ons-splitter-content id="content">
57      <ons-navigator id="navigator" page="home.html"></ons-navigator>
58    </ons-splitter-content>
59  </ons-splitter>
60
61  <ons-template id="home.html">
62    <ons-page>
63     <div class="center">
64      トップページ
65     </div>
66    </ons-page>
67  </ons-template>
68
69  <ons-template id="test.html">
70    <ons-page id="test">
71      <ons-toolbar>
72        <div class="left">
73          <ons-toolbar-button onclick="fn.open()">
74            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
75          </ons-toolbar-button>
76        </div>
77        <div class="center">
78          テストページ
79        </div>
80      </ons-toolbar>
81    </ons-page>
82  </ons-template>
83</body>
84</html>