На кнопку, созданную через innerHTML, не могу повесить обработчик событий addEventListener ( )

Question

Задача: при клике на текстовую фразу - включается обработчик событий addEventListener, меняющий её через innerHTML + добавление новой кнопки.

Сложность: новую кнопку не видит, соответственно не могу ей присвоить новый обработчик событий addEventListener ( ), например alert () или иной функционал.

<div class="product">
        <span class="productName">Товар 1</span>
        <p>Описание товара</p> 
    </div>

    <script>'use strict';

    let pro = document.querySelector('.product');
 
    //Добавить новый текст+ кнопку-> 
     let p= function pp(){
        pro.innerHTML = `
        <div>Другой товар</div>
        <div>Другое описание</div>
        <button>Удалить</button>
       `
    }

    //реакция на клик = вызов функции рр()
    pro.addEventListener('click', p); 
   
    //отсюда не хочет видеть кнопку из функции pp()
    let bt = document.querySelector ('button')

    bt.addEventListener ('click', function (){
        alert ('Тест срабатывания новой кнопки')
    })

Answer 1

Когда исполняется код

let bt = document.querySelector('button')

кнопки еще нет в DOM (в html), она появляется при клике по div.product, поэтому обработчик на кнопку следует вешать после добавления самой кнопки в html, в данном примере достаточно код переместить в тело функции p:

function p(){
  pro.innerHTML = `
   <div>Другой товар</div>
   <div>Другое описание</div>
   <button>Удалить</button>
  `;

  let bt = document.querySelector ('button')

  bt.addEventListener ('click', function (){
    alert ('Тест срабатывания новой кнопки')
  })      
}

jsfiddle

БЛОГ НА HUSL

На кнопку, созданную через innerHTML, не могу повесить обработчик событий addEventListener ( )

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