[英]addEventListener 'click' works only once
我正在為一些可能是基本的事情而苦苦掙扎。 綁定到按鈕的事件(下面的代碼)只工作一次。 之后,單擊按鈕似乎沒有再發生任何事情。 我已經在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>
當您設置 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.