ページ遷移後にjsで要素を追加したいのでpostpushを使いたいです。
環境
- Onsen UI V2 JS Navigationでアプリを作っています。
- Angular.jsは使っていません。
まずは検証用として作ったソースコードを
html5で省略可能なタグは極力削ってます
html
1<!doctype html> 2<meta charset="UTF-8"> 3<!-- OnsenUIのCDN --> 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.min.js"></script> 7 8<ons-navigator id="navigator" var="myNavigator" page="first.html"></ons-navigator> 9 10<template id="first.html"> 11 <ons-page> 12 <ons-toolbar> 13 <div class="center">一つ目のページ</div> 14 </ons-toolbar> 15 <button onclick="fn.pushPage('second.html')">二つ目のページへ</button> 16 </ons-page> 17</template> 18 19<template id="second.html"> 20 <ons-page> 21 <ons-toolbar> 22 <div class="center">二つ目のページ</div> 23 </ons-toolbar> 24 <div id="target"><!-- ページ遷移後に画像を入れる --></div> 25 </ons-page> 26</template> 27 28<script> 29var nav = document.getElementById("navigator"); 30 31document.addEventListener('init', function(event) { 32 window.fn = {}; 33 //ページ遷移 34 window.fn.pushPage = function(page) { 35 nav.pushPage(page); 36 }; 37}); 38 39ons.ready(function() { 40 nav.on('postpush', function(event) { 41 console.log("ページ遷移アニメーション終わったよ"); 42 }); 43}); 44</script> 45
参考にしたサイト
ons-navigator - Onsen UI
このページを見て、postpushの存在を知る(それまでsetTimeoutでやってました)
Onsen UI でOnsen UIフレームワーク内の要素にjQueryでアクセスできない
表示されるエラー
chromeのデベロッパーツールを見ると…
Uncaught TypeError: nav.on is not a function
と出ます。
ここに書いてあるsetTimeoutを使ってその場しのぎをしているのですが、その下に書いてあるpostpushが全く動かず困っています。
どうか、よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。