ページからページへの移動でエラーが発生しました（重複しますか？）

Question

私はOnsenUI 2（今のところrc15）のpushPage()機能を使用しようとしています。 OnsenUIと並んで、私はここでのjQuery 3.

を使用しています特定の要素をクリックするとページをプッシュしなければならないというのが私の関数である。

$(".tile_handler").on("click", ".imalink", function() { 
    var link = $(this).data().href; 
    if(link != null){ 
     document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" }); 
    } 
}) 

私が最初にページをプッシュすると、それが正常に動作します。私は戻るためにiOSの戻るボタンを使用します。それから私はもう一度それをクリックして、私はこのエラーが発生します（そして、プロセスを繰り返すにつれますますますます）：

[index.js：450] pushpageはすでに実行中です。ここで

は、スプリッタのページをロードするようになっている別の関数である：私はスプリッタを経由して2つのページを切り替えると、それはこれを投げて開始し

$(".splitter_item").click(function() { 
    var address = $(this).data('address'); 
    $('#content')[0].load(address).then(menu.close.bind($('#menu')[0])); 
}) 

（そしてより多くの私はページを切り替えるたびに）

[未定義：1]未知（約束）スプリッタ側がロックされています。

---

何が起こっている私が想定し、私は、ページをロードし、それを残して、私は再びそれをアクセスするとき、それは再びページをロードすることです。しかしas thisなOnsenUI例に示した行動ではないようですその：

document.addEventListener('init', function(event) { 
    var page = event.target; 

    if (page.id === 'page1') { 
    page.querySelector('#push-button').onclick = function() { 
     document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}}); 
    }; 
    } else if (page.id === 'page2') { 
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title; 
    } 
}); 

以前にロードされたページを削除すべきであり、これを防止するであろうpopPage()機能があります。しかし、参照はそれを使用しないので、私は何か間違っていると仮定します。しかし、私は何を知りません。

---

UPDATE：

私はCodePenで両方の問題を再現するために管理。 Hereはスプリッタエラーで、hereはpushPage()です。 pushPage()のように私の機能に問題があるようですが、それをクリックするたびにpushPage()リクエストが追加されます。理由はわかりません。

両方のエラーは、Rippleエミュレータでのみ発生します（VS2015経由）。私はAndroidのエミュレータでそれらを再現することができないようです（しかし、$(".tile_handler").on("click", ".imalink", function() {コードは何度も取り消されます）。私はこれをさらにテストしています。

Answer 1

例えば、ボタン/リンクをダブルクリックすると、間違って何度か何度か何度も何度も何度も何度も何度も安全な措置を講じることができます。

アニメーションの実行中にアクションを実行しようとすると表示されます。例でわかるように、最初のページが終了してから2回目のプッシュを開始する限り、ページを2回以上プッシュすることは問題ありません。

splitterとnavigatorの両方の正確なコードのデモがあります。

エラーは、あなたが提供したコード、他の場所のものではありません。

私が思いつくことができるのは、なんらかの理由でpopPageメソッドが正しく終了しなかった場合に、あなたが言及した動作が見られるということだけです。たぶん、問題を再現できる独自のコードを提供すれば、それをさらにデバッグすることができます。

あなたの行動を行う前に、高度にNOTを推奨します。しかし、これは問題を解決するのではなく、むしろそれを隠すだけです。もちろん、すべてのハッキングと同様に、将来のバージョンでは破損する可能性があります。

myNavigator._isRunning = false; 

UPDATE：ここ

は、あなたがコメントで与えた2本の更新のペンされています https://codepen.io/IliaSky/pen/YWOOkW?editors=1010 https://codepen.io/IliaSky/pen/QEVVGm?editors=1010

基本的にはあなたがいつでも解雇されinitイベント、上のハンドラを追加しましたページが追加されます。あなたのロジックでは、各ページにますますハンドラーを追加しています。ちょうどあなたがそれらを一度だけ追加して、あなたは大丈夫でしょう。

if (e.target.id == 'pagename') ... 

または単に

$(document).on("init", '#dashboard_page', function(){ ... } 

Answer 2

基本的にページをプッシュするたびに、そのページがinitイベントを発生：

は次のようなものを追加します。しかし、温泉はまだ最初のページをドームに残しています。

ナビゲーターの例は、（同じロジックは、スプリッタ1に適用されます）：

<ons-navigator> 
    <ons-page id="dashboard"> 
    <div class="imalink" data-href="request_list.html"></div> 
    </ons-page> 
</ons-navigator> 

あなたはダッシュボードのためのinitイベントを持っています。次に、タイルをクリックして別のページに移動します。 request_listは、それ自身のinitイベントを発生させます。しかし、私たちの最初のページはまだdomにあります。

<ons-navigator> 
    <ons-page id="dashboard" style="display: none"> 
    <div class="imalink" data-href="request_list.html"></div> 
    </ons-page> 
    <ons-page id="request_list"> 
    ... 
    </ons-page> 
</ons-navigator> 

このようなものがあります。ただし、次のことをもう一度呼びます：

$(".tile_handler").on("click", ".imalink", function() { 
    ... 
}) 

リスナーをもう一度追加します。 $el.on("click")の別名がaddEventListenerのように、リスナーがますます追加されています。

したがって、最初のページがDOMから削除されていないため、移動するたびに追加してください。

代替ソリューション：

1. のみを使用して、現在のページ（e.target）

   $('selector') // instead of this 
   $(e.target).find('selector') // use this 
   

   あなただけ作成したばかりのページ内の要素を見つけることに制限するこの方法。

2. ハンドラを最初から有効にします。 jQueryを使用しているので、実際にはinitイベントに頼らずに簡単に処理できます。

   はただの初期化ハンドラのこの外の操作を行います。

   $(document).on("click", ".tile_handler .imalink", function() { ... }) 
   

   これは、実際にハンドラが文書自体に取り付けられており、ターゲットが.tile_handler .imalinkある場合にのみ、ハンドラが呼び出されることを意味する - それがどんなで動作しますので、あなたが作成する将来のイマンクンク。

   これは最も効率的なアプローチではありませんが、最も単純な方法の1つです。