jQuery 点击事件问题 - Framework7答案

【问题标题】：jQuery Click Event Issue - Framework7jQuery 点击事件问题 - Framework7
【发布时间】：2017-05-29 10:18:12
【问题描述】：

所以我有几个问题。第一个......我有 2 个页面，一个 products.html 页面和一个 search.html 页面。 products.html 页面在 .onPageAfterAnimation(); 中运行一些 Ajax；从数据库中获取产品并显示它们。返回的 HTML 包含用户可以在文本框中增加和减少数字值的部分。

当我打开products.html页面时，将值增加或减少1的按钮最初可以工作，但是，当我进入search.html并使用Android的后退按钮返回products.html页面时（我有pushState = true) 并按下增加/减少按钮，它增加/减少2。如果我再次尝试做同样的事情，它增加/减少3等等......

这是我的 products.html 页面中的增加/减少代码：

myApp.onPageAfterAnimation('catalogs', function (page) {

  //Increse/decrease product quantity
  $(“.promo-screen-content”).on(“click”, “.addToCartBtn”, function(){
    var productid = $(this).attr(“data-productId”),
        currentvalue = parseInt($('#txtQuantity' + productid).val());

    $('#txtQuantity' + productid).val((currentvalue + 1).toString());
  });

  $(“.promo-screen-content”).on(“click”, “.removeFromCartBtn”, function(){
    var productid = $(this).attr(“data-productId”),
        currentvalue = parseInt($('#txtQuantity' + productid).val());

    if(currentvalue > 1){
        $('#txtQuantity' + productid).val((current_value – 1).toString());
    }
  });

});

有人知道为什么会发生这种情况以及如何解决吗？

我的第二个问题有点不同。当我单击一个按钮时，它会单击并执行该过程 3 或 4 次。因此，例如，如果我在单击通知时显示通知，它会显示该通知 3 或 4 次。

我不知道这些是否常见或知道人们遇到的问题。非常感谢任何帮助！

【问题讨论】：

你什么时候调用上面的代码？（绑定何时发生）。我问是因为问题是您绑定了多次相同的处理程序（因此它们运行多次）。
所以一个快速的解决方法可能是使用off 在再次绑定之前取消绑定处理程序。 $(“.promo-screen-content”).off('click','.addToCartBtn').on(“click”,'.addToCartBtn', ...) 和 $(“.promo-screen-content”).off('click','.removeFromCartBtn').on(“click”,'.removeFromCartBtn', ...)。但是必须有一个基于我没有使用的 Framework7 的更正确的方法，所以我不能提出任何相关的建议。
默认情况下，所有页面都使用 Ajax 加载。我不知道这是否与它有关，因为当我转到search.html 然后返回products.html 然后在该页面中刷新它再次开始工作。所以这发生在第二个页面加载了 Ajax 并返回之后。
off() 是一种创可贴的解决方案——您不应在一个页面上多次分配这些事件处理程序。我认为$(document).ready 会更适合处理程序。
@BrianMoreno 来自文档 (framework7.io/docs/page-callbacks.html#callbacks-methods)，看起来 onPageInit 事件可能是一个更好的候选对象。

标签： javascript jquery ajax html-framework-7

【解决方案1】：

我将代码放入错误的页面回调中。我不得不把它放在.onPageInit(); 回调中。

【讨论】：