Question

我的网站上有一个结帐部分，我在数量部分运行此事件监听器，这样每次根据产品点击数量更新时，整个div都会使用AJAX重新加载（所以所有价格，总金额也刷新了）

代码可以工作一次，但之后，该功能不再起作用了。

$(".cart-product-quantity").bind('keyup mouseup', function () {
  console.log("working");
  var id = $(this).attr("name");
  var quantity = $(this).val();
  $.ajax({
      url: 'assets/processes/updateCartQuantities.php',
      type: 'POST',
      data: {'id': id, 'quantity' : quantity},
      success: function(data) {
        $('.checkout-table-outer').load(document.URL +  ' .checkout-table');
      }
    }); // end ajax call
});

我确定这是因为我正在刷新.cart-product-quantity所在的部分，但我如何绕过它以使其每次都能正常工作？

由于

Answer 1

我看到的是你绑定到.cart-product-quantity的事件，但不知何故，元素在刷新时会丢失。在这种情况下，您需要为动态元素使用事件委托。

说明：

$(".cart-product-quantity").bind('keyup mouseup', function () {...

因此，您的代码正在做的是选择具有类.cart-product-quantity的元素，并将传递的函数绑定到直接提供给元素的事件'keyup mouseup'

但是当您在ajax调用中更新DOM时，元素会再次重新创建，尽管它们具有相同的html结构和类，它们在内存中不相同。这些元素是新元素，因为您从未将任何事件绑定到这些新创建的元素，所以事件永远不会被调用。

对于这些类型的动态元素，将事件绑定到它们将不起作用。

您需要使用Event Delegation

事件委托允许我们将单个事件监听器附加到父元素，将为匹配a的所有后代触发选择器，无论这些后代现在存在还是被添加到将来

现在，

$(document).on('keyup mouseup', ".cart-product-quantity", function () {...

以上代码正在做的是它向document添加事件，并使用选择器".cart-product-quantity"将事件委托给它。这里document没有得到刷新，它总是如此，它可以接收这些事件，并使用选择器和触发器事件动态选择它们的死者。

因为，这些委托是动态发生的。它会选择任何新创建的decedents，因此它可以触发刷新元素上的事件。

尝试使用此jquery

$(document).on('keyup mouseup', ".cart-product-quantity", function () {
  console.log("working");
  var id = $(this).attr("name");
  var quantity = $(this).val();
  $.ajax({
      url: 'assets/processes/updateCartQuantities.php',
      type: 'POST',
      data: {'id': id, 'quantity' : quantity},
      success: function(data) {
        $('.checkout-table-outer').load(document.URL +  ' .checkout-table');
      }
    }); // end ajax call
});

Ajax刷新后的事件监听器

1 个答案: