Javascript 从一页移动到另一页会产生错误（重复？）

我正在尝试使用OnsenUI 2的

pushPage（）。除了OnsenUI之外，我还使用jquery3

以下是我的功能，单击某些元素时应推送页面：

$(".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]));
})

当我通过Splitter在两个页面之间切换时，它开始抛出这个（并且每次在页面之间切换时抛出更多）

[未定义：1]未捕获（承诺中）分离器侧已锁定


我假设我加载一个页面，离开它，当我再次访问它时，它会再次加载该页面。然而，这似乎不是OnsenUI示例中显示的行为，例如：

有一个
popPage（）
函数，它应该删除以前加载的页面，并防止出现这种情况。但是参考文献没有使用它，所以我认为我做错了什么。但我不知道是什么


更新：

我设法用CodePen重现了这两个问题。是拆分器错误，是
pushPage（）
one。似乎
pushPage（）
one是我函数的一个问题，因为每次我单击它时，它都会添加一个
pushPage（）
请求，但不知道为什么

这两个错误似乎只发生在Ripple emulator中（通过VS2015）。我似乎无法在Android Emulator中重现它们（但
$（“.tile\u handler”）。在（“click”、“.imalink”上，函数（）{
代码多次不正确地触发）。我正在对此进行进一步测试。
您提到的两个错误实际上都是一种安全措施，可以防止您在双击按钮/链接时两次误按或执行某些操作

当您尝试在动画运行时执行操作时，它们会出现。正如您在示例中所看到的，只要在第一次推送完成后开始第二次推送，通常推送页面两次或两次以上都没有问题

以下是和的确切代码演示

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

我能想到的唯一一件事是，如果由于某种原因，
popPage
方法未能正确完成，您提到的行为将被看到。也许如果您为我们提供您自己的代码笔，在那里可以重现问题，我们可以进一步调试它

另一种方法，虽然高度而不是建议，是在你采取行动之前强制执行状态。然而，这不会解决问题，而只是掩盖问题。当然，与所有黑客一样，它可能会在未来的版本中崩溃

myNavigator._isRunning = false;

更新：

以下是您在评论中给出的两支更新钢笔：

基本上，您是在
init
事件上添加处理程序，每当添加页面时都会触发该事件。因此，根据您的逻辑，您将在每个页面上添加越来越多的处理程序。只要确保只添加一次，您就可以了

添加以下内容：

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

或者干脆

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

你提到的这两个错误实际上都是一种安全措施，例如，如果你双击一个按钮/链接，你会错误地推或做两次某个动作

当您尝试在动画运行时执行操作时，它们会出现。正如您在示例中所看到的，只要在第一次推送完成后开始第二次推送，通常推送页面两次或两次以上都没有问题

以下是和的确切代码演示

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

我能想到的唯一一件事是，如果由于某种原因，
popPage
方法未能正确完成，您提到的行为将被看到。也许如果您为我们提供您自己的代码笔，在那里可以重现问题，我们可以进一步调试它

另一种方法，虽然高度而不是建议，是在你采取行动之前强制执行状态。然而，这不会解决问题，而只是掩盖问题。当然，与所有黑客一样，它可能会在未来的版本中崩溃

myNavigator._isRunning = false;

更新：

以下是您在评论中给出的两支更新钢笔：

基本上，您是在
init
事件上添加处理程序，每当添加页面时都会触发该事件。因此，根据您的逻辑，您将在每个页面上添加越来越多的处理程序。只要确保只添加一次，您就可以了

添加以下内容：

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

或者干脆

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

基本上，每次推送一个页面时，该页面都会触发一个
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（“单击”）
类似于
addEventListener
的别名，意味着您正在添加越来越多的侦听器

因此，无论何时导航，都会不断添加它们，因为初始页面从未从dom中删除

替代解决方案：

仅使用当前页面（
e.target
）

这样，您只能在刚刚创建的页面中查找元素

从一开始就启用处理程序。
因为您使用的是jQuery，所以实际上有一种更简单的方法来完成这些事情，而不依赖
init
事件

只需在任何init处理程序之外执行此操作：

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

这实际上意味着处理程序被附加到文档本身，并且只有当目标是
.tile\u handler.imalink
-时才会调用处理程序，因此
$(".tile_handler").one("click", ".imalink", function () {
var link = $(this).data().href;
if(link != null){
    document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" });
}})