Question

我正在为一些可能是基本的事情而苦苦挣扎。绑定到按钮的事件（下面的代码）只工作一次。之后，单击按钮似乎不会再发生任何事情。我已经在 blur 函数的第一个 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

当您设置正文的 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>

addEventListener 'click' 只工作一次

1 个答案: