从页面到页面移动会产生错误（重复？）

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已在运行。

这里是一个应该载入分路器页面的另一个功能：

$(".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是Splitter错误，而here是pushPage()之一。这似乎是pushPage()一个是我的功能有问题，因为它每次点击它时都会添加一个pushPage()请求，不知道为什么。

这两个错误似乎只发生在纹波模拟器（通过VS2015）。我似乎无法在Android模拟器中重现它们（但是无论如何，$(".tile_handler").on("click", ".imalink", function() {代码会多次引发错误）。我正在进一步测试。

Answer 1

如果您双击某个按钮/链接，例如您提及的两个错误实际上都是您推送或执行错误操作两次的安全措施。

当您尝试在动画运行时进行操作时，会显示它们。正如你可以在例子中看到的那样，只要在第一次完成之后开始第二次推送，就可以将页面推送两次或更多次，这是没有问题的。

以下是您的确切代码为splitter和navigator的演示。

因此，错误不是来自您提供的代码，也不是来自其他地方的代码。

我唯一能想出的是，如果出于某种原因popPage方法未能正确完成，您会提到的行为。也许如果您向我们提供您自己的codepen可以复制问题，我们可以进一步调试它。

一个替代方案，虽然高度不是建议将是在你做你的行动之前强制的状态。然而，这不会解决问题，而只是掩盖它。当然，就像所有黑客一样 - 它可能会在未来的版本中崩溃。

myNavigator._isRunning = false; 

UPDATE：

这里是您在评论中给了两个更新的笔： 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。然而，温泉仍然保持最初的页面。

导航示例（相同的逻辑适用于分离器的一个）：

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

您有仪表盘init事件。然后，您单击该图块并转到其他页面。 然后request_list发生了自己的init事件。然而，我们的初始页面仍然是最后一页。

<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的处理器将被调用 - 因此它与任何工作未来您创建的固定链接。

   这可能不是最有效的方法，但绝对是最简单的一种。