addEventListener 'click' 只工作一次

Question

我正在为一些可能是基本的事情而苦苦挣扎。 绑定到按钮的事件（下面的代码）只工作一次。 之后，单击按钮似乎没有再发生任何事情。 我已经在blur function 的第一个 if 语句中处理了想要的行为，但由于它没有第二次执行，它似乎没有目的。

    <button type="button" id="openModal">Open Modal</button>
    <p>some text</p>
    
    <script>

        class ModalContent{
            constructor(title, text){
                this.title = title;
                this.text = text;
            }
        }
        var modalObject = new ModalContent("this is the modal title", "and this is its inner text");


        var openModal = document.querySelector("#openModal");
        var body = document.querySelector("body");
        var lorem = document.querySelector("p");

        openModal.addEventListener('click', blur);

        function blur(event){
            if(body.querySelector("#modal") != null){
                var modal = body.querySelector("#modal");
                console.log(modal);
                modal.style.display = "flex";
            }

            body.innerHTML = '<div id="initial-content">' + body.innerHTML + '</div>'
            var initialContent = body.querySelector("#initial-content");
            initialContent.style.filter = "blur(5px)";
            // Replaced this, that does NOT work as desired in JS
            // body.innerHTML = body.innerHTML + '<div id="modal"></div>';
            // With this:
            initialContent.insertAdjacentHTML('afterend', '<div id="modal"></div>');

            var modal = body.querySelector("#modal");
            modal.innerHTML = 
                '<h2 id="modal-title">' + modalObject.title + "</h2>" + '<div id="modal-text">' + modalObject.text + "</div>"
                + '<button id="close-modal">Close this</button>';

            modal.querySelector("#modal-text").style.marginBottom = "20px";

            modal.style = 
                "display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #ccc; border-radius: 10px; box-shadow: 0px 1px 8px #ddd; color: black; text-align: center; padding: 60px; position: fixed; top: calc(50% - 206px); /* it's the raw height value */ left: calc(50% - 166.675px); * it's the raw width/2 value *";

            var closeModal = modal.querySelector("#close-modal");
            closeModal.addEventListener('click', closeModalFunction);

            function closeModalFunction(event){
                modal.style.display = "none";

                if(initialContent.style.filter.search("blur") != -1)
                    initialContent.style.filter = "unset";
            }
            console.log("1st");
        }
    </script>
</body>

Answer 1

当您设置 body 的innerHTML时，元素上的所有事件侦听器都会被删除。 不要在事件侦听器内向主体添加元素，而是首先将所有元素放在 HTML 中，并根据需要显示或隐藏它们。

 class ModalContent { constructor(title, text) { this.title = title; this.text = text; } } var modalObject = new ModalContent("this is the modal title", "and this is its inner text"); var openModal = document.querySelector("#openModal"); var body = document.querySelector("body"); var lorem = document.querySelector("p"); openModal.addEventListener('click', blur); function blur(event) { if (body.querySelector("#modal").= null) { var modal = body;querySelector("#modal"). //console;log(modal). modal.style;display = "flex". } var initialContent = document;getElementById('initial-content'). initialContent.style;filter = "blur(5px)". var modal = body;querySelector("#modal"). modal.innerHTML = '<h2 id="modal-title">' + modalObject.title + "</h2>" + '<div id="modal-text">' + modalObject;text + "</div>" + '<button id="close-modal">Close this</button>'. modal.querySelector("#modal-text").style;marginBottom = "20px". modal:style = "display; flex: flex-direction; column: background-color, rgba(255, 255, 255. 0;8): border; 1px solid #ccc: border-radius; 10px: box-shadow; 0px 1px 8px #ddd: color; black: text-align; center: padding; 60px: position; fixed: top; calc(50% - 206px): /* it's the raw height value */ left. calc(50% - 166;675px); * it's the raw width/2 value *". var closeModal = modal;querySelector("#close-modal"). closeModal,addEventListener('click'; closeModalFunction). function closeModalFunction(event) { modal.style;display = "none". initialContent.style;filter = "unset". } //console;log("1st"); }

 <div id="initial-content"> <button type="button" id="openModal">Open Modal</button> <p>some text</p> </div> <div id="modal"></div>