@AndreyVolkov72

Почему в блоке, который был создан с помощью innerHTML и отрисован в html, не работает js код?

Суть
По клику на копку, в html должен добавляться блок("header__basket-item"), в этом блоке по клику на кнопку("header__btn-delete"), должна происходить функция удаления этого блока с html. Но ничего не происходит.
Но когда вручную создаю эти блоки в html то всё работает, а когда добавляется блок через js, ничего не работает.
Единственной что "нарыл" в интернете, что innerHTML не всегда работает корректно и надо как-то по другому отрисовать блок

html

<div class="header-basket-content">
    <div class="header__basket-item">
        <img class="header__basket-img" src="img/mac/mc-little.png" alt="">
        <div class="header__basket-text">
            <p class="card__title text--margin">Ноутбук Apple MacBook Pro 16 TB i7 2.6/16/512 SSD SG MVVJ2RU/A</p>
            <p class="card__price">190 789 ₽</p>
        </div>
        <img class="header__btn-delete" src="img/backet/trash 3.svg" alt="">
    </div>
</div>


Функция создания блока в html по клику
const headerItemWrapper = document.querySelector('.header-basket-content');

btn.addEventListener('click', ()=> {

        headerItemWrapper.innerHTML += createItemBasket();

        function createItemBasket() {
            return `
            <div class="header__basket-item">
                <img class="header__basket-img" src="img/mac/mc-little.png" alt="">
                <div class="header__basket-text">
                    <p class="card__title text--margin">Ноутбук Apple MacBook Pro 16 TB i7 2.6/16/512 SSD SG MVVJ2RU/A</p>
                    <p class="card__price">190 789 ₽</p>
                </div>
                <img class="header__btn-delete" src="img/backet/trash 3.svg" alt="">
            </div>
            `
        }
    })


На всякий случай вот функция удаления блока
const basketItem = document.querySelectorAll('.header__basket-item');

basketItem.forEach(item=> {

    let basketBtnDelete = item.querySelector('.header__btn-delete');

    basketBtnDelete.addEventListener('click', ()=> {
        headerItemWrapper.removeChild(item);
    })
})
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
@7rows
Держите, вот тут описание, что вам надо использовать Делегирование

НУжно событие на родителя повесить и тогда он будет обрабатывать потомков
Ну, либо когда вставляете элемент, вызывайте новый слушатель для этого элемента
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
СИГМА Санкт-Петербург
от 190 000 ₽
ITSOFT Москва
от 60 000 до 90 000 ₽
JustControl.it Санкт-Петербург
от 50 000 ₽
30 июл. 2021, в 11:26
3000 руб./за проект
30 июл. 2021, в 10:21
3000 руб./за проект
30 июл. 2021, в 10:14
2000 руб./за проект