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