javascript - Ajax 刷新后的事件监听器

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

我看到的是您正在将事件绑定(bind)到 .cart-product-quantity 但不知何故该元素在刷新时丢失了。在这种情况下，您需要对动态元素使用事件委托(delegate)。

说明:

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

因此，您的代码所做的就是选择 .cart-product-quantity 类的元素，并将传递的函数绑定(bind)到提供的事件 'keyup mouseup'直接到元素

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

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

您需要使用Event Delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

现在，

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

上面的代码所做的是将事件添加到文档，并使用选择器“.cart-product-quantity”将事件委托(delegate)给它的后代。这里的 document 没有被刷新，它总是存在，所以它可以接收这些事件并使用选择器和触发事件来动态选择其后代。

因为，这些委派是动态发生的。它也会选择任何新创建的后代，因此它能够在刷新的元素上触发事件。

尝试使用这个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
});