Tengo una función que obtiene datos de un archivo php y los inserta en el html. El problema es que necesito agregar detectores de eventos de arrastrar y soltar a todos estos nuevos elementos insertados, y no sé cómo puedo hacerlo.

Aquí está mi función:

 function getTask() { //create -> Ajax request const req = getHttpRequest(); req.open("GET", "../php/task.php"); req.onload = function() { const result = JSON.parse(req.responseText); const html = result.map(function(task){ return taskHTML(task.title); }).join(''); const thread = document.querySelector('#list-task'); thread.insertAdjacentHTML('beforeend', html); } req.send(); }

Y me gustaría agregar estos detectores de eventos a mi nuevo elemento insertado:

 task.addEventListener('dragstart', dragStart, false); task.addEventListener('dragenter', dragEnter, false); task.addEventListener('dragleave', dragLeave, false); task.addEventListener('dragover', dragOver, false); task.addEventListener('drop', dragDrop, false); task.addEventListener('dragend', dragEnd, false);

Así que traté de hacer esto:

 const secondFunction = async () => { const result = await getTask(); tasks = document.querySelectorAll('.task'); tasks.forEach(task => { task.addEventListener('dragstart', dragStart, false); task.addEventListener('dragenter', dragEnter, false); task.addEventListener('dragleave', dragLeave, false); task.addEventListener('dragover', dragOver, false); task.addEventListener('drop', dragDrop, false); task.addEventListener('dragend', dragEnd, false); }); } secondFunction();

Pero no funciona. También observé la delegación de eventos, pero no creo que se aplique en mi caso, ya que son eventos de arrastrar y soltar y no eventos de clic. Entonces, ¿hay alguna forma de adjuntar estos eventos a mis nuevos elementos insertados?