Javascript中使用insertBefore后事件监听器丢失的解决求助

我正在实现用户点击上下箭头移动包含文本及其他元素的Div功能，目标是让用户自由调整Div的排列顺序。但遇到一个问题：用insertBefore重排元素后，只能执行一次点击操作，后续点击没反应，看起来每次操作后事件监听器都丢了。请问怎么保留原有事件监听器？

相关代码：

for (let i = 0; i < NumberOfSavedIdeas; i++) {
    document.getElementById('DeleteIdeaButton' + [i]).addEventListener('click', () => {
        var DivToDelete = document.getElementById("SavedIdeaDiv" + [i]);
        DivToDelete.remove();

        let ArrayContentMatch = FullSavedIdeasArray.indexOf(FullSavedIdeasArray[i])
        FullSavedIdeasArray.splice(ArrayContentMatch, 1);
        chrome.storage.local.set({SavedIdeas: FullSavedIdeasArray});
    });

    document.getElementById('MoveIdeaUp' + [i]).addEventListener('click', () => {
        var DivToMove1 = document.getElementById("SavedIdeaDiv" + [i]);
        var ParentDiv1 = document.getElementById("DivTesting");
        ParentDiv1.insertBefore(DivToMove1, ParentDiv1.children[i-1]);
    });

    document.getElementById('MoveIdeaDown' + [i]).addEventListener('click', () => {
        alert('move down')
    });
}    

问题根源 #

你在循环里用固定索引i绑定事件，当Div位置变动后，原有索引和实际DOM结构的对应关系失效了。比如原来第2个Div（i=1）移到第1位后，按钮还是绑定着i=1的逻辑，但此时它在父元素里的位置已经是0，后续点击会触发错误的逻辑，导致看起来像监听器丢失。

修复方案1：事件委托（推荐） #

把事件监听器绑定到父元素DivTesting上，利用事件冒泡机制处理所有子按钮的点击。不管Div怎么移动，事件都会被父元素捕获，再通过触发事件的目标元素判断操作类型。

代码示例：

// 移除原循环内的事件绑定代码
const parentDiv = document.getElementById('DivTesting');

// 处理删除操作
parentDiv.addEventListener('click', (e) => {
    if (e.target.id.startsWith('DeleteIdeaButton')) {
        const index = e.target.id.replace('DeleteIdeaButton', '');
        const divToDelete = document.getElementById(`SavedIdeaDiv${index}`);
        divToDelete.remove();

        // 更新数组与本地存储
        FullSavedIdeasArray.splice(index, 1);
        chrome.storage.local.set({SavedIdeas: FullSavedIdeasArray});
        
        // 可选：重新渲染元素并更新ID，保持索引与DOM对应
    }
});

// 处理上移操作
parentDiv.addEventListener('click', (e) => {
    if (e.target.id.startsWith('MoveIdeaUp')) {
        const index = e.target.id.replace('MoveIdeaUp', '');
        const divToMove = document.getElementById(`SavedIdeaDiv${index}`);
        const prevSibling = divToMove.previousElementSibling;
        
        if (prevSibling) { // 非第一个元素才允许上移
            parentDiv.insertBefore(divToMove, prevSibling);
            
            // 同步更新数组顺序
            const temp = FullSavedIdeasArray[index];
            FullSavedIdeasArray[index] = FullSavedIdeasArray[index - 1];
            FullSavedIdeasArray[index - 1] = temp;
            chrome.storage.local.set({SavedIdeas: FullSavedIdeasArray});
        }
    }
});

// 处理下移操作
parentDiv.addEventListener('click', (e) => {
    if (e.target.id.startsWith('MoveIdeaDown')) {
        const index = e.target.id.replace('MoveIdeaDown', '');
        const divToMove = document.getElementById(`SavedIdeaDiv${index}`);
        const nextSibling = divToMove.nextElementSibling;
        
        if (nextSibling) { // 非最后一个元素才允许下移
            parentDiv.insertBefore(divToMove, nextSibling.nextElementSibling);
            
            // 同步更新数组顺序
            const temp = FullSavedIdeasArray[index];
            FullSavedIdeasArray[index] = FullSavedIdeasArray[index + 1];
            FullSavedIdeasArray[index + 1] = temp;
            chrome.storage.local.set({SavedIdeas: FullSavedIdeasArray});
        }
    }
});

修复方案2：绑定事件时获取实时上下文 #

如果不想用事件委托，修改循环内的事件绑定逻辑，不要依赖固定的循环变量i，而是通过DOM元素的实际位置获取索引：

// 修改原循环内的上移事件逻辑
document.getElementById(`MoveIdeaUp${i}`).addEventListener('click', (e) => {
    const divToMove = document.getElementById(`SavedIdeaDiv${i}`);
    const parentDiv = document.getElementById('DivTesting');
    // 获取元素在父元素中的实时索引
    const currentIndex = Array.from(parentDiv.children).indexOf(divToMove);
    
    if (currentIndex > 0) {
        parentDiv.insertBefore(divToMove, parentDiv.children[currentIndex - 1]);
        
        // 同步更新数组顺序
        const temp = FullSavedIdeasArray[currentIndex];
        FullSavedIdeasArray[currentIndex] = FullSavedIdeasArray[currentIndex - 1];
        FullSavedIdeasArray[currentIndex - 1] = temp;
        chrome.storage.local.set({SavedIdeas: FullSavedIdeasArray});
    }
});

注意：这种方法需要每次移动后确保元素ID与数组索引一致，否则后续操作仍会出错，灵活性不如事件委托。

关键注意事项 #

• 每次移动Div后，必须同步更新FullSavedIdeasArray的顺序，保证数组与DOM结构一致。
• 避免用固定索引绑定事件，优先通过DOM元素的位置或关系获取实时索引。

内容的提问来源于stack exchange，提问作者king_anton