Делегирование JS, при клика дочерный элемент не работает функция

Question

Делегирование JS, при клика дочерный элемент не работает функция

Рейтинг: 1Ответов: 0Опубликовано: 21.01.2023

Пожалуйста помогите, про делегирование, при клике блока с указанным классом работает функция, но когда при клике дочерних элементов не работает. Как сделать чтобы при клике блока и дочерних элементов работал функция. Это

Структура

const chooseItem = document.querySelectorAll('.choose__item'),
  chooseItems = document.querySelector('.choose-items');

function hideClassChoose() {
  chooseItem.forEach(item => {
    item.classList.remove('choose__item-active');
  });
}
hideClassChoose();

function showClassChoose(i = 0) {
  chooseItem[i].classList.add('choose__item-active');
}
showClassChoose();

chooseItems.addEventListener('click', (e) => {
  const target = e.target;

  if (target && target.classList.contains('choose__item')) {
    chooseItem.forEach((item, i) => {
      if (target == item) {
        hideClassChoose();
        showClassChoose(i);
      }
    })
  }
});

<div class="choose-items">
  <div class="choose__item">
    <div class="choose__item-icon">
      <img src="img/icons/gift.svg" alt="gift">
    </div>
    <div class="choose__item-head">
      98% Success Rate
    </div>
    <div class="choose__item-descr">
      Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequatduis enim velit mollit Exer.
    </div>
  </div>

  <div class="choose__item">
    <div class="choose__item-icon">
      <img src="img/icons/gift.svg" alt="gift">
    </div>
    <div class="choose__item-head">
      98% Success Rate
    </div>
    <div class="choose__item-descr">
      Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequatduis enim velit mollit Exer.
    </div>
  </div>
</div>

javascript

Источник: Stack Overflow на русском

Делегирование JS, при клика дочерный элемент не работает функция

Ответы