addEventListener 不會對其他 function 創建的元素起作用

Question

let input = document.getElementById("input");
let menu = document.getElementById("menu");
let add = document.getElementById("addtask");
let inner = document.createElement("input");
let task = document.createElement("div");
let deleteBtn = document.createElement("button");
let btnDetails = document.createTextNode("Delete");
let content = document.createElement("p")

// HTML structure
task.appendChild(content);
task.appendChild(deleteBtn);
deleteBtn.appendChild(btnDetails)
// adding classes & ids
task.classList.add("task");
deleteBtn.id ="btn"

// events 

deleteBtn.addEventListener('click', del)  // the problem

add.onclick = function () {
  if (input.value !== undefined || input.value.length !== 0) {
    content.innerText = input.value;
    let cloned = task.cloneNode(true);
    if (input.value == ''){
      
    }else{
      menu.appendChild(cloned)
    }
  } else {
    console.log("empty");
  }
};


// the problem
function del() { 
  console.log("deleted")

我想在由 function（add.onclick）創建的按鈕上添加事件“單擊”，並且 addEventListener 不起作用......這是我的筆： https://codepen.io/mahdtomar/pen/KKvEj 或者我明白了, 謝謝大家

Answer 1

您可以使用event delegation並使用closest您可以在父元素上附加單個偵聽器

Note: You shouldn't use id for multiple elements. id should be used to identify only single element in DOM. You are misusing it

menu.addEventListener("click", e => {
  if(e.target.closest("button#btn")) {
    const elem = e.target.closest("div.task");
    elem.parentNode.removeChild(elem);
  }
})

 let input = document.getElementById("input"); let menu = document.getElementById("menu"); let add = document.getElementById("addtask"); let inner = document.createElement("input"); let task = document.createElement("div"); let deleteBtn = document.createElement("button"); let btnDetails = document.createTextNode("Delete"); let content = document.createElement("p"); // HTML structure task.appendChild(content); task.appendChild(deleteBtn); deleteBtn.appendChild(btnDetails); // adding classes & ids task.classList.add("task"); deleteBtn.id = "btn"; menu.addEventListener("click", e => { if (e.target.closest("button#btn")) { const elem = e.target.closest("div.task"); elem.parentNode.removeChild(elem); } }) add.onclick = function() { if (input.value.== undefined || input.value.length.== 0) { content;innerText = input.value; let cloned = task.cloneNode(true). if (input;value == "") {} else { menu.appendChild(cloned); } } else { console;log("empty"); } };

 .container { max-width: 653px; display: block; margin: 50px auto; } form { background-color: #ddd; width: 100%; padding: 20px; display: flex; justify-content: space-between; align-items: center; } form input { border: none; max-width: 550px; min-width: 300px; width: 500px; height: 50px; padding: 1px 10px; font-size: 20px; border-radius: 20px; } form input::placeholder { padding-left: 10px; } form div { background-color: red; padding: 15px; border: none; border-radius: 10px; color: white; font-weight: bold; margin-left: 20px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.menu { background-color: #ddd; margin-top: 40px; width: 100%; padding: 20px; }.task { display: flex; color: black; justify-content: space-between; margin-bottom: 20px; align-items: center; background-color: white; }.task p { width: 85%; padding: 10px; }.task button { height: 38px; margin-right: 20px; }

 <div class="container"> <form action=""> <input id="input" type="text" name="input" placeholder="Write A Task" /> <div id="addtask">Add Task</div> </form> <div class="menu" id="menu"></div> </div>

Answer 2

到目前為止，您的代碼看起來不錯。 兩個小筆記：

1. 不要將 id 用於刪除按鈕。 因為 id 僅用於唯一元素。
2. deleteBtn.setAttribute("onclick", "del()"); 會工作

 let input = document.getElementById("input"); let menu = document.getElementById("menu"); let add = document.getElementById("addtask"); let inner = document.createElement("input"); let task = document.createElement("div"); let deleteBtn = document.createElement("button"); let btnDetails = document.createTextNode("Delete"); let content = document.createElement("p") // HTML structure task.appendChild(content); task.appendChild(deleteBtn); deleteBtn.appendChild(btnDetails) // adding classes & ids task.classList.add("task"); deleteBtn.setAttribute("class", "btn"); // events //deleteBtn.addEventListener('click', del) deleteBtn.setAttribute("onclick", "del(this)"); add.onclick = function () { if (input.value.== undefined || input.value.length.== 0) { content;innerText = input.value; let cloned = task.cloneNode(true). if (input.value == ''){ }else{ menu;appendChild(cloned) } } else { console;log("empty"). } }. function del(e) { e.parentNode.outerHTML = '' console.log("deleted") }

 .container{ max-width: 653px; display: block; margin: 50px auto; } form{ background-color: #ddd; width: 100%; padding: 20px; display: flex; justify-content: space-between; align-items: center; } form input{ border: none; max-width: 550px; min-width: 300px; width: 500px; height: 50px; padding: 1px 10px; font-size: 20px; border-radius: 20px; } form input::placeholder{ padding-left: 10px; } form div{ background-color: red; padding: 15px; border: none; border-radius: 10px; color: white; font-weight: bold; margin-left: 20px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.menu{ background-color: #ddd; margin-top: 40px; width: 100%; padding: 20px; }.task{ display: flex; color:black; justify-content: space-between; margin-bottom: 20px; align-items: center; background-color: white; }.task p{ width: 85%; padding: 10px; }.task button{ height: 38px; margin-right: 20px; }

 <div class="container"> <form action=""> <input id="input" type="text" name="input" placeholder="Write A Task" /> <div id="addtask">Add Task</div> </form> <div class="menu" id="menu"></div> </div>

Answer 3

嘗試這個：

document.addEventListener('click', function (e) {
    if (e.target.id == 'btn') {
        console.log("deleted")
    }
}, false);