javascript - eventListeneres 没有响应或死于 DOM 操作

Question

简单地说，我正在创建一个网络应用程序，我正在向<section>正文添加一个新的覆盖 + 警报按钮，并且在删除此部分时，其他 4 个侦听器往往会停止工作，它们不是“点击”而是“按键，按键”。

    function listeners() {
    reloadContent();

    document.getElementById('input-pros').addEventListener('keypress', userSubmitData);

    document.getElementById('input-cons').addEventListener('keypress', userSubmitData);

    document.getElementById('input-pros').addEventListener('keydown', tabBetweenInputBoxes);

    document.getElementById('input-cons').addEventListener('keydown', tabBetweenInputBoxes);

    document.getElementsByClassName('fa-trash-restore-alt')[0].addEventListener('click', deleteAll);

    document.addEventListener('click', closeEvents);
}

// This here is the function called on 'click' events
// The else if statement part was the problem. (Fixed now) please read on.

function closeEvents(event) {

    let tempEvent = event.target;

    if (tempEvent.classList.contains('fa-window-close')) {
        removeFromLocalStorage(tempEvent.parentElement.innerText, tempEvent.parentElement.parentElement.id);
        tempEvent.parentElement.remove(); // removes from UI
    } else if (tempEvent.id === 'overlay' || tempEvent.classList.contains('btn-alert')) {
        document.getElementById('overlay-space').innerHTML = '';
    } else {
        console.log(`Else`);
    }
}

这些是我的侦听器，附加到我正在使用事件冒泡的文档的侦听器是最后一个。我相信这与我添加/删除<section>. 现在我通过创建一个空<section>并将该代码放入其中来解决问题，在删除时我只是清空了该部分。如果您查看下面的代码，您会看到我指向一个特定的#ID，它是 Body{} 中的空白部分，但在此之前（当它被窃听时）我只是将它添加到 body 中 ->document.body.innerHTML +=这对我来说是有道理的，因为我正在添加一个部分，而我只是删除了该部分，其他任何东西都不应该受到影响。我能想到的唯一问题是一些 eventListeners 将附加到元素或该部分并且在删除时也会被丢弃，但由于我使用事件冒泡，这应该不是问题。对于事件冒泡，我尝试将其附加到两者，window.并且document.我知道它已修复我在这里对问题进行任何解释以及为什么会发生这种情况以便更好地理解，谢谢。

    {
            document.getElementById('overlay-space').innerHTML += `
            <section id="overlay">
                <div id="pop-up-alert">
                    <p>Sorry No Duplicates Allowed.</p>
                    <div>
                        <svg><rect></rect></svg>
                        <input type="button" value="OK" class="btn-alert" />
                    </div>
                </div>
            </section>
            `;
        }

标签： javascriptdom-events