セルをタップしても画面遷移が出来ない

前提・実現したいこと

https://www.youtube.com/watch?v=dHfvNMUxgYE&t=1206s
を参考に画面遷移を実装しているのですが、
動画の通り書いているのですが、セルは押せるのですが画面遷移が出来ません。
現在原因を調べているのですが分かっていない状況です。
ご教示いただけたら幸いです。

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <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'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }

    

  </script>
</head>
<body>

<ons-navigator id="navigatior" page="mainPage"></ons-navigator>

<template id="mainPage">
  
<ons-page>
  <!--ツールバー-->
  <ons-toolbar class="toolbar">
 <div class="center">テスト</div>
  </ons-toolbar>

<ons-list>
  <ons-list-header>Default</ons-list-header>
  <ons-list-item tappable onclick="document.querySelector('#navigator').pushPage('navigatorSample')">アイテム</ons-list-item>
</ons-list>
</ons-page>
</template>

<template id="navigatorSample">

  <ons-page>
    <ons-toolbar>
      <div class="center">ページ遷移サンプル</div>
    </ons-toolbar>
  </ons-page>

</template>

</body>
</html>

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

回答1件

ベストアンサー

id名が一致しない場合、正常に動作しません。

HTML
1<ons-navigator id="navigatior" page="mainPage"></ons-navigator>
2:
3:
4:
5<ons-list-item tappable onclick="document.querySelector('#navigator').pushPage('navigatorSample')">アイテム</ons-list-item>

投稿2020/10/18 10:43