InnerHTML пересоздает все элементы внутри родителя. Как исправить задачу?

Question

[fron321]

При клике на "выбрать" и "купить" я меняю бордер элементов. Только при клике на "выбрать" меняю туда и обратно, а при клике на "купить" только в одну сторону, меняя текст на этом месте. Вот моя проблема. После того как я меняю и возвращаю обратно бордер при клике на "выбрать" почему-то после этого кнопка "купить" не работает. Хотя если нажать её в самом начале, она работает. В чем дело и как это исправить?
https://codepen.io/fad90/pen/yLVRMOv

Comments

[Sergo Zar]

у меня с input'ом похожая проблема

Answer 1

[Сергей Соколов]

Когда innerHTML заменяет содержимое, пропадают слушатели событий.

Comments

[fron321]

А как исправить знаете?

[Сергей Соколов]

fron321, можно слушать событие клика не прямо на элементах, а выше — события же поднимаются «пузырьком» наверх по дереву DOM. Вместо этого:

for (let i = 0; i < el.span.length; i++) {
      el.span[i].addEventListener("click", buyElement);
    };

сделайте

document.body.addEventListener('click', (event) => {
  if (! event.target.classList.contains('span')) {
    return;
  }

  // здесь обработка клика по элементу с классом span
});

Так можно удалять-добавлять элементы с классом span и клики по ним будут нормально обрабатываться.

Answer 2

[wisgest]

и как это исправить

Вставлять/вырезать не HTML-код, а узлы DOM.