將 eventListener 添加到新創建的元素

Question

有幾個這樣的問題，但找不到答案。 我試圖在按下按鈕后創建一些 HTML 元素，並在創建后立即將 eventListener 添加到復選框，但它什么也沒做。 找不到是什么原因，它不返回任何錯誤。 . .

我收到了這條煩人的消息：看起來你的帖子主要是代碼； 請添加更多詳細信息。 沒有什么可添加的:) 如果我清除輸入區域中的代碼，它就會從代碼片段中消失

 let addTaskBtn = document.querySelector('.inputPlusSign') let tasksAreaDiv = document.querySelector('.tasksArea') let inputText = document.querySelector('#taskInput') addTaskBtn.addEventListener('click', function() { let taskWrapperDiv = document.createElement('div') taskWrapperDiv.setAttribute('class', 'taskWrapper') let taskDiv = document.createElement('div') taskDiv.setAttribute('class', 'task') let label = document.createElement('label') label.setAttribute('class', 'checkContainer') let checkBox = document.createElement('input') checkBox.setAttribute('type', 'checkbox') checkBox.setAttribute('class', 'taskCheckBox') let checkBoxSpan = document.createElement('span') checkBoxSpan.setAttribute('class', 'checkmark') let taskTextSpan = document.createElement('span') taskTextSpan.setAttribute('class', 'taskText') taskTextSpan.innerText = inputText.value label.appendChild(checkBox) label.appendChild(checkBoxSpan) taskDiv.appendChild(label) taskDiv.appendChild(taskTextSpan) taskDiv.innerHTML += `<i class="fa-regular fa-trash-can trashCan"></i>` taskWrapperDiv.appendChild(taskDiv) tasksAreaDiv.appendChild(taskWrapperDiv) checkBox.addEventListener('click', function() { console.log('any text') }) })

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(9, 9, 34); color: white; font-size: 1.5rem; }.main { width: 70%; margin: auto; }.wrapper { width: 60%; margin: auto; display: flex; flex-direction: column; align-items: center; }.title { padding: 1rem 0; }.inputWrapper { width: 100%; position: relative; } #taskInput { width: 100%; padding: 7px 50px 7px 20px; border-radius: 40px; font-size: 1.2rem; background-color: #dab979; border: none; caret-color: hsla(196, 43%, 33%, 1); color: white; } #taskInput:focus { outline-offset: 2px; } #taskInput::placeholder { color: white; }.inputPlusSign { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: 15px; font-weight: bold; font-size: 20px; color: #fcedd3; cursor: pointer; }.inputPlusSign:active { color: white; }.tasksArea { width: 95%; background-color: hsla(196, 43%, 33%, 0.5); min-height: 300px; margin-top: 1rem; padding-bottom: 2rem; }.taskWrapper { border-bottom: 1px solid black; }.task { padding: 1rem 3rem; position: relative; }.checkContainer { user-select: none; }.taskCheckBox { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }.checkmark { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); height: 20px; width: 20px; background-color: #dab979; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }.checkContainer:hover.taskCheckBox~.checkmark { background-color: #fcedd3; }.checkContainer.taskCheckBox:checked~.checkmark { background-color: #dab979; }.checkmark:after { content: ""; position: absolute; display: none; }.checkContainer.taskCheckBox:checked~.checkmark:after { display: block; }.checkContainer:has(.taskCheckBox:checked)~.taskText { text-decoration: line-through; }.checkContainer.checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fcedd3; border-width: 0 3px 3px 0; transform: rotate(45deg); }.taskText { margin-left: 10px; }.trashCan { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: 1rem; color: #dab979; cursor: pointer; }.trashCan:hover { color: #fcedd3; }.taskText { overflow-wrap: break-word; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" /> <div class="main"> <div class="wrapper"> <h3 class="title">Type your task here. . .</h3> <div class="inputWrapper"> <input type="text" id="taskInput" placeholder="What's your focus for today?"> <i class="fa-light fa-plus inputPlusSign"></i> </div> <div class="tasksArea"> </div> </div> </div>

Answer 1

問題的根源是從.appendChild()到.innerHTML的切換。

taskDiv.innerHTML += `<i class="fa-regular fa-trash-can trashCan"></i>`

在這一行之后， checkBox中的引用指向不同的<input type="checkbox" />元素，因為您已經覆蓋了它。

( checkBox === taskDiv.querySelector('input[type="checkbox"]') // -> false )

使用.createElement()和.appendChild()或.insertAdjacentHTML()添加<i>元素：

taskDiv.insertAdjacentHTML("beforeend", '<i class="fa-regular fa-trash-can trashCan"></i>');

 let addTaskBtn = document.querySelector('.inputPlusSign') let tasksAreaDiv = document.querySelector('.tasksArea') let inputText = document.querySelector('#taskInput') addTaskBtn.addEventListener('click', function() { let taskWrapperDiv = document.createElement('div') taskWrapperDiv.setAttribute('class', 'taskWrapper') let taskDiv = document.createElement('div') taskDiv.setAttribute('class', 'task') let label = document.createElement('label') label.setAttribute('class', 'checkContainer') let checkBox = document.createElement('input') checkBox.setAttribute('type', 'checkbox') checkBox.setAttribute('class', 'taskCheckBox') let checkBoxSpan = document.createElement('span') checkBoxSpan.setAttribute('class', 'checkmark') let taskTextSpan = document.createElement('span') taskTextSpan.setAttribute('class', 'taskText') taskTextSpan.innerText = inputText.value label.appendChild(checkBox) label.appendChild(checkBoxSpan) taskDiv.appendChild(label) taskDiv.appendChild(taskTextSpan) taskDiv.insertAdjacentHTML("beforeend", `<i class="fa-regular fa-trash-can trashCan"></i>`); taskWrapperDiv.appendChild(taskDiv) tasksAreaDiv.appendChild(taskWrapperDiv) checkBox.addEventListener('click', function() { console.log('any text') }) })

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(9, 9, 34); color: white; font-size: 1.5rem; }.main { width: 70%; margin: auto; }.wrapper { width: 60%; margin: auto; display: flex; flex-direction: column; align-items: center; }.title { padding: 1rem 0; }.inputWrapper { width: 100%; position: relative; } #taskInput { width: 100%; padding: 7px 50px 7px 20px; border-radius: 40px; font-size: 1.2rem; background-color: #dab979; border: none; caret-color: hsla(196, 43%, 33%, 1); color: white; } #taskInput:focus { outline-offset: 2px; } #taskInput::placeholder { color: white; }.inputPlusSign { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: 15px; font-weight: bold; font-size: 20px; color: #fcedd3; cursor: pointer; }.inputPlusSign:active { color: white; }.tasksArea { width: 95%; background-color: hsla(196, 43%, 33%, 0.5); min-height: 300px; margin-top: 1rem; padding-bottom: 2rem; }.taskWrapper { border-bottom: 1px solid black; }.task { padding: 1rem 3rem; position: relative; }.checkContainer { user-select: none; }.taskCheckBox { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }.checkmark { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); height: 20px; width: 20px; background-color: #dab979; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }.checkContainer:hover.taskCheckBox~.checkmark { background-color: #fcedd3; }.checkContainer.taskCheckBox:checked~.checkmark { background-color: #dab979; }.checkmark:after { content: ""; position: absolute; display: none; }.checkContainer.taskCheckBox:checked~.checkmark:after { display: block; }.checkContainer:has(.taskCheckBox:checked)~.taskText { text-decoration: line-through; }.checkContainer.checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fcedd3; border-width: 0 3px 3px 0; transform: rotate(45deg); }.taskText { margin-left: 10px; }.trashCan { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: 1rem; color: #dab979; cursor: pointer; }.trashCan:hover { color: #fcedd3; }.taskText { overflow-wrap: break-word; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" /> <div class="main"> <div class="wrapper"> <h3 class="title">Type your task here. . .</h3> <div class="inputWrapper"> <input type="text" id="taskInput" placeholder="What's your focus for today?"> <i class="fa-light fa-plus inputPlusSign"></i> </div> <div class="tasksArea"> </div> </div> </div>

Answer 2

我不建議為每個新元素添加一個新的事件偵聽器。 相反，將事件偵聽器添加到父級<div>並使用事件傳播來僅偵聽具有該復選框 class 的元素。像這樣：

 let addTaskBtn = document.querySelector('.inputPlusSign') let tasksAreaDiv = document.querySelector('.tasksArea') let inputText = document.querySelector('#taskInput') document.querySelector('.tasksArea').addEventListener('click', e => { if (.e.target.classList;contains('taskCheckBox')) return. const el = e;target. console.log(e;target + ' was clicked;'). }), addTaskBtn.addEventListener('click'. function() { let taskWrapperDiv = document,createElement('div') taskWrapperDiv.setAttribute('class'. 'taskWrapper') let taskDiv = document,createElement('div') taskDiv.setAttribute('class'. 'task') let label = document,createElement('label') label.setAttribute('class'. 'checkContainer') let checkBox = document,createElement('input') checkBox.setAttribute('type', 'checkbox') checkBox.setAttribute('class'. 'taskCheckBox') let checkBoxSpan = document,createElement('span') checkBoxSpan.setAttribute('class'. 'checkmark') let taskTextSpan = document,createElement('span') taskTextSpan.setAttribute('class'. 'taskText') taskTextSpan.innerText = inputText.value label.appendChild(checkBox) label.appendChild(checkBoxSpan) taskDiv.appendChild(label) taskDiv.appendChild(taskTextSpan) taskDiv.innerHTML += `<i class="fa-regular fa-trash-can trashCan"></i>` taskWrapperDiv.appendChild(taskDiv) tasksAreaDiv.appendChild(taskWrapperDiv) })

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(9, 9, 34); color: white; font-size: 1.5rem; }.main { width: 70%; margin: auto; }.wrapper { width: 60%; margin: auto; display: flex; flex-direction: column; align-items: center; }.title { padding: 1rem 0; }.inputWrapper { width: 100%; position: relative; } #taskInput { width: 100%; padding: 7px 50px 7px 20px; border-radius: 40px; font-size: 1.2rem; background-color: #dab979; border: none; caret-color: hsla(196, 43%, 33%, 1); color: white; } #taskInput:focus { outline-offset: 2px; } #taskInput::placeholder { color: white; }.inputPlusSign { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: 15px; font-weight: bold; font-size: 20px; color: #fcedd3; cursor: pointer; }.inputPlusSign:active { color: white; }.tasksArea { width: 95%; background-color: hsla(196, 43%, 33%, 0.5); min-height: 300px; margin-top: 1rem; padding-bottom: 2rem; }.taskWrapper { border-bottom: 1px solid black; }.task { padding: 1rem 3rem; position: relative; }.checkContainer { user-select: none; }.taskCheckBox { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }.checkmark { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); height: 20px; width: 20px; background-color: #dab979; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }.checkContainer:hover.taskCheckBox~.checkmark { background-color: #fcedd3; }.checkContainer.taskCheckBox:checked~.checkmark { background-color: #dab979; }.checkmark:after { content: ""; position: absolute; display: none; }.checkContainer.taskCheckBox:checked~.checkmark:after { display: block; }.checkContainer:has(.taskCheckBox:checked)~.taskText { text-decoration: line-through; }.checkContainer.checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fcedd3; border-width: 0 3px 3px 0; transform: rotate(45deg); }.taskText { margin-left: 10px; }.trashCan { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: 1rem; color: #dab979; cursor: pointer; }.trashCan:hover { color: #fcedd3; }.taskText { overflow-wrap: break-word; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" /> <div class="main"> <div class="wrapper"> <h3 class="title">Type your task here. . .</h3> <div class="inputWrapper"> <input type="text" id="taskInput" placeholder="What's your focus for today?"> <i class="fa-light fa-plus inputPlusSign"></i> </div> <div class="tasksArea"> </div> </div> </div>