Event listener after Ajax refresh

Question

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

Not sure without seeing the html. [_Event delegation_](https://learn.jquery.com/events/event-delegation/) might be what you need here. — abhishekkannojia, May 24 '17 at 10:00
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Douwe de Haan, May 24 '17 at 10:01
Seems like the manual advises to use `.on()` instead of `.bind()`. — KIKO Software, May 24 '17 at 10:01

Nadir Laskar · Accepted Answer · 2017-05-24T11:00:02.913

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

This works flawlessly! Thanks, could you possibly explain why this works instead of my method for future reference? Thanks — , May 24 '17 at 10:07

Event listener after Ajax refresh

1 Answers1

Linked