У меня есть контрольный раздел на моем сайте, и я запускаю этот прослушиватель событий в разделе количества, чтобы каждый раз, когда количество обновлений на основе продукта было нажато, весь 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 , но как мне обойти его, чтобы он работал каждый раз?
благодаря
Я вижу, что вы являетесь обязательным событием для количества .cart-product-quantity но каким-то образом элемент теряется при обновлении. В этом случае необходимо использовать делегирование событий для динамических элементов.
Объяснение:
$(".cart-product-quantity").bind('keyup mouseup', function () {...
Итак, что делал ваш код, он выбирает элементы с классом .cart-product-quantity и связывает переданную функцию с событиями, предоставляемыми 'keyup mouseup' непосредственно элементам
Но по мере того как вы обновляете DOM в своем вызове ajax, элементы снова воссоздаются, хотя у них одинаковая структура и классы html они не одинаковы в памяти. Эти элементы являются новыми элементами, и поскольку вы никогда не привязывали какие-либо события к этим вновь созданным элементам, события никогда не вызываются.
Для этих типов динамических элементов привязка событий к ним не будет работать.
Вам необходимо использовать Event Delegation
Делегирование событий позволяет нам присоединить одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех потомков, соответствующих селектору, независимо от того, существуют ли эти потомки или добавлены в будущем.
Теперь,
$(document).on('keyup mouseup', ".cart-product-quantity", function () {...
Что делает вышеприведенный код, он добавляет событие в document и он делегирует события его рекурентам, используя селектор ".cart-product-quantity" . Здесь 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 });