Привязка onclick работает не верно

Question

Привязка onclick работает не верно.

У меня есть такой код:

$('.add-to-cart').on('click', function (e) {
  console.log('Add to cart', e)
  $(this).toggleClass('add-to-cart')
  $(this).addClass('remove-from-cart')
  $(this).text('Удалить')
})

$('.remove-from-cart').on('click', function (e) {
  console.log('Remove from cart', e)
  $(this).toggleClass('remove-from-cart')
  $(this).addClass('add-to-cart')
  $(this).text('Добавлено')
 })

При клике на .add-to-cart всё отлично отрабатывает, класс меняется.

Теперь после клика на .remove-from-cart, работает код, который привязан на .add-to-cart, почему?

Answer 1

событие привязывается не к классу, а к элементу DOM. Классом вы только фильтруете элементы, к которым привязывается обработчик события. поэтому единожды привязав при старте событие добавления на кнопку, оно так и останется там висеть.

у вас есть по сути 3 варианта действий:

сделать две кнопки. скрывать или показывать нужную вместо смены классов
Использовать одну кнопку, но добавить data-атрибут, который будет определять действие, и в обработчике клика ориентироваться на него.

добавить событие на подходящий родительский элемент.

$(".some-parent").on('click', '.add-to-cart', func1)  
                 .on('click', '.remove-from-cart', func2)`

БЛОГ НА HUSL

Привязка onclick работает не верно

Ответы (1 шт):