Не правильно работает счетчик товара, чем больше товаров тем больше счетчик +-.
Структура кода.
При нажатии кнопки добавить в корзину:
$('.btn-add-cart').click(function(e){
createCartElement(); });
Идет вызов функции в которой, при каждом нажатии, создается карточка с товаром:
out += '<button class="btn-counter minus"><p class="btn-text">-</p></button>';
out += '<input class="counter" value="1">';
out += '<button class="btn-counter plus"><p class="btn-text">+</p></button>';
cartItem.innerHTML = out;
cartItems.append(cartItem);
Внутри этой же функции обрабатывается нажатие на кнопки + и - с выводом счетчика:
$('.btn-counter.plus').click(function(e) {
let input = parseInt(e.target.parentElement.parentElement.children[1].value);
input = input + 1;
e.target.parentElement.parentElement.children[1].value = input;
});
$('.btn-counter.minus').click(function(e) {
let input = parseInt(e.target.parentElement.parentElement.children[1].value);
input = input - 1;
e.target.parentElement.parentElement.children[1].value = input;
if (input == 0) {
input = 1;
}
});
И так, суть проблемы заключается в том, что при первом нажатии на кнопку (добавить в корзину)- добавляется один товар и все работает хорошо, счетчик добавляет +1 и -1, создали еще одну, старая карточка +2 -2, а новая +1 -1 итд (+3 -3), скорее всего при создании нового элемента оно передает значение старому, прошу помочь с данной проблемой, пробовал уже разные варианты, ничего толкового не нашел.
createCartElement()
каждые раз на всеbtn-counter
навешиваются события? Можно вынести в содержимое обработчиков +/- в отдельные функции и создавать кнопки как элементы с присвоениемbtn.onclick = funcItemIncrement()
. Возможно нужно что бы funcItemIncrement возращала fn() => e=> {}
что бы можно было это делать :e.target.parentElement.parentElement.children