Не могу реализовать удаление из корзины без перезагрузки страницы
Аjax запрос
$('.cart__item').on('click','.del_item', function(){
let id = $(this).data('id');
$.ajax({
url: '/cart/delete',
data: {id: id},
type: 'GET',
success: function(res){
$('.cart_block').replaceWith(res);
},
error: function(){
alert('Errывывor!');
}
});
});
Первое удаление проходит как надо, а удаление следующего элемента уже только после перезагрузки страницы
Пробовал
$('.cart_block').html(res);
так все элементы удаляются по очереди, без перезагрузки, Но, это ломает к чертям разметку, пшто на старую накладывается новый html
Ответы (1 шт):
Автор решения: teran
→ Ссылка
предположу, что ваша структуру DOM выглядит как .cart_block => .cart_item => .del_item. Текущий обработчик удаления привязан к имеющимся .cart_item. Когда родительский блок заменяется новым контентом результатами аякса, то все .cart_item удаляются вместе со своими обработчиками, поэтому обработчики надо привязывать к этому .cart_block, который никуда не исчезает из DOM.
$(".cart_block").on("click", ".del_item", function(e){
e.preventDefault(); // если .del_item это <a class="del_item">
});