javascript - Event listener after Ajax refresh - Stack Overflow

admin管理员组

文章数量:1355646

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
});

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?

Thanks

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
});

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?

Thanks

• javascript
• php
• jquery
• ajax

Share Improve this question Follow asked May 24, 2017 at 9:58 user7070541user7070541 3

• Not sure without seeing the html. Event delegation might be what you need here. – abhishekkannojia Commented May 24, 2017 at 10:00
• Possible duplicate of Event binding on dynamically created elements? – Douwe de Haan Commented May 24, 2017 at 10:01
• Seems like the manual advises to use .on() instead of .bind(). – KIKO Software Commented May 24, 2017 at 10:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

Explanation:

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

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

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.

You need to use 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.

Now,

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

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.

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

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
});

本文标签： javascriptEvent listener after Ajax refreshStack Overflow