0

I have a function which gets data from a php file and insert them in the html. The problem is that I need to add drag & drop event listeners to all these new inserted elements, and I don't know how I can do so.

Here is my function :

    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();

}

And I would like to add these event listeners to my new inserted element :

  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);

So I tried doing this :

    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();

But it doesn't work. I also looked at event delegation but I don't think it applies in my case since it's drag and drop events and not click events. So is there a way to attached these events to my new inserted elements ?

Question1010
  • 35
  • 5
  • 1
    [Drag](https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event) & [drop](https://developer.mozilla.org/en-US/docs/Web/API/Document/drop_event) events are specifically events of the document, they're also bubbling, hence delegating shouldn't be a problem? – Teemu Jan 26 '22 at 11:39
  • Could you describe more what your second function does? I can't understand why, once you have inserted your new HTML, you can't just do a JS querySelectorAll to get the relevant elements. – A Haworth Jan 26 '22 at 11:41
  • `thread.addEventListener("dragstart",drag); thread.addEventListener("dragend",drag); ` etc and then `const drag e => { const tgt = e.target.closest('.task'); const type = e.type; switch(type) { case 'dragstart': tgt.......; break; case 'dragend': tgt.......; break; }}` – mplungjan Jan 26 '22 at 11:50
  • @AHaworth It was a way to wait for the function getTask() to finish being executed before getting all sections with class .task. The weird thing is that if after the document.insertAdjacentHTML I do console.log(document.querySelectorAll('.task')) it prints me the empty list which is kinda weird... – Question1010 Jan 26 '22 at 17:35

0 Answers0