Не срабатывает onclick у созданных кнопок

Question

Создал 200 кнопок в js с data-id, после цикла for хочу сделать чтобы при нажатии на кнопки, которые красного цвета выходил alert, но, видимо, неправильно на них ссылаюсь (хотя как только уже не пробовал).

    var result3 = document.getElementById('result3');
    window.onload = function(ev) {
        for(let i=1;i<=20;i++) {
            result3.innerHTML += '<div class="numFila"><h1>'+i+'</h1></div> <br>';
            for(let j=1;j<=10;j++){
                var numRandom=Math.round(Math.random()*200)+1;  
                result3.innerHTML += '<button data-id="'+numRandom+'">'+j+'</button>'
                let buttonAsientos = document.querySelector('button[data-id="'+numRandom+'"]');
                 if(buttonAsientos.dataset.id<100){
                    buttonAsientos.style="background-color: red";
                    buttonAsientos.dataset.id="bPrueba";               
                }
            }
        }
    };
    document.querySelectorAll('button[data-id="bPrueba"]').onclick=function(ev){
        alert('esta ocupado');
    };

Answer 1

Для работы с большим количеством однотипных элементов (и не только) можно использовать делегирование событий. https://learn.javascript.ru/event-delegation

document.addEventListener('DOMContentLoaded', _ => {
  document.getElementById('result3').addEventListener('click', e => {
    const v = e.target?.dataset?.id
    if (v != 'bPrueba') return
    console.log('esta ocupado')
    //alert('esta ocupado')
  })
})

<div id='result3'>
  <button data-id='bPrueba'>ok</button>
  <button data-id='tmp'>no</button>
  <button>no</button>
  <button data-id='bPrueba'>ok</button>
</div>

БЛОГ НА HUSL

Не срабатывает onclick у созданных кнопок

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