拖放不适用于动态插入的元素

Question

我有一个div，它是可拖动的部分列表。

然后我有一个拖放脚本，看起来像这样：

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

function dragStart(e) {
//do something
};
function dragEnter(e) {
//do something
}
function dragLeave(e) {
//do somehting
}
function dragOver(e) {
//do something
}
function dragDrop(e) {
//do something 
}
function dragEnd(e) {
//do something
}

<div id="list">
<section id="1" class="task" draggable="true">
<p> Something here </p>
</section>
<section id="2" class="task" draggable="true">
<p> Something here </p>
</section>
...
</div>

一切都很完美(每个部分都可以拖放(。

然而，如果我不使用静态HTML：document.getElementById('list').insertHTML(//my draggable sections)，那么我的js脚本似乎就不起作用了。我不能拖动&放下我的部分。

我不明白为什么，插入部分似乎会动态地改变一些东西，但我不明白是什么。。。有办法解决这个问题吗？

Answer 1

通过element.insertHTML()，您是element.insertAdjacentHTML()吗
无论如何，我猜代码执行顺序有问题，可能是在运行

const tasks = document.querySelectorAll('.task');

在更改.list元素内的html之前。这意味着const tasks最终成为空数组(它实际上是空的NodeList，但不在这里(

此外，如果您没有任何特定的理由使用insertAdjacentHTML，我建议您使用appendChild。

UPD

此外，每次向列表中添加新项目时，都必须向添加的每个节点添加eventListener。