Ajax刷新后的事件监听器 [英] Event listener after Ajax refresh

问题描述

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

I have a checkout section on my site, and I'm running this event listener on the quantity section so that every time the quantity updates based on the product clicked, the whole div reloads using AJAX (so all prices, total amounts refresh too)

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

The code works once but after that, the function doesnt work anymore.

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

我确定这是因为我正在刷新<$ c $的部分c> .cart-product-quantity 的位置，但我如何绕过它以便它每次都能正常工作？

I'm certain its due to the fact that i'm refreshing the section where .cart-product-quantity is located, but how do i get around it so that it will work every time?

谢谢

推荐答案

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

What I see is you are binding event to the .cart-product-quantity but somehow the element is getting lost on your refresh. You need to use event delegation in that case for dynamic elements.

说明：

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

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

So, what your code was doing is it select the elements with class .cart-product-quantity and binds the passed function to the events provided 'keyup mouseup' directly to the elements

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

But as you are updating the DOM in your ajax call the elements are getting recreated again although they have same html structure and classes they are not same in the memory. These elements are new elements and as you have never binded any events to these newly created elements the events are never called.

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

For these types of dynamic elements binding events to them will not work.

您需要使用活动代表团

事件委托允许我们将单个事件监听器附加到
父元素，该元素将为所有后代触发匹配
选择器，无论这些后代现在是否存在或是否在
future中添加。

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将事件委托给死者。这里文档没有得到刷新，它始终如此，它可以接收这些事件并使用选择器和触发事件动态选择它们的死者。

What above code is doing is it adds event to the document and it delegates the events to it decedents using the selector ".cart-product-quantity". Here document is not getting refreshed and its there always so, it can receive these events and dynamically select its decedents using selector and trigger events on them.

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

As, these delegation happens dynamically. it selects any newly created decedents also thus it is able to trigger events on your refreshed elements.

尝试使用此jquery

Try using this 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刷新后的事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！