JavaScript动态渲染元素事件监听器失效问题求助

问题描述 #

我正在开发一款支持任务删除与编辑的待办事项应用，当前任务删除功能无法正常运行。点击通过JavaScript动态渲染的<li>元素内的删除按钮时，甚至连console.log('hi')都无响应。尝试过使用for in循环解决，但没有效果。

相关代码 #

HTML代码 #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To-Do List</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/9d829ab911.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <main>
      <h2>What would you like to do today?</h2>
      <form id="taskForm">
        <input
          type="text"
          name=""
          id=""
          class="task-input"
          placeholder="Walk the dog"
        />
        <input
          type="datetime"
          name=""
          id=""
          class="due-date"
          placeholder="Today at 12:00"
        />
        <button type="submit">Add Task</button>
      </form>
      <ul class="task-bar">
        <!-- <li class="task">
          <div class="details">
            <input type="checkbox" name="" id="" />
            <p>${taskDescription}</p>
          </div>
          <div class="buttons">
            <button><i class="fa-solid fa-pen-to-square edit"></i></button>
            <button class="delete">❌</button>
          </div>
        </li> -->
      </ul>
     
    </main>
    <script defer src="script.js"></script>
  </body>
</html>

JavaScript代码（原代码） #

const form = document.getElementById('taskForm');
const taskInput = document.querySelector('.task-input');
const dueDateInput = document.querySelector('.due-date');
const taskBar = document.querySelector('.task-bar');
const editButton = document.querySelectorAll('.edit');
const editForm = document.getElementById('taskForm-edit');
const deleteTask = document.querySelectorAll('.delete');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Prevent default form submission
  let taskDescription = taskInput.value;

  const task = ` 
      <li class="task">
          <div class="details">
            <input type="checkbox" name="" id="" />
            <p>${taskDescription}</p>
          </div>
          <div class="buttons">
            <button><i class="fa-solid fa-pen-to-square edit"></i></button>
            <button class="delete">❌</button>
          </div>
        </li>`;
  taskBar.insertAdjacentHTML('beforebegin', task);


});

deleteTask.forEach((task) => {
  task.addEventListener('click', (e) => {
    console.log('hi');
  });
});
});

问题原因 #

页面初始化时，你通过document.querySelectorAll('.delete')获取删除按钮，但此时动态生成的任务元素还未被添加到DOM中，所以这些事件监听无法绑定到后续新增的删除按钮上，导致点击无响应。另外原代码末尾多了一个多余的});，会引发语法错误。

解决方案 #

使用事件委托，将事件监听绑定到已存在的父元素（比如.task-bar）上，利用事件冒泡机制处理动态元素的点击事件。同时修正任务插入的语义位置，并清理输入框。

修改后的JavaScript代码：

const form = document.getElementById('taskForm');
const taskInput = document.querySelector('.task-input');
const taskBar = document.querySelector('.task-bar');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let taskDescription = taskInput.value.trim();
  
  if (!taskDescription) return;

  const task = ` 
      <li class="task">
          <div class="details">
            <input type="checkbox" name="" id="" />
            <p>${taskDescription}</p>
          </div>
          <div class="buttons">
            <button><i class="fa-solid fa-pen-to-square edit"></i></button>
            <button class="delete">❌</button>
          </div>
        </li>`;
  // 将任务插入到ul内部，符合HTML语义规范
  taskBar.insertAdjacentHTML('beforeend', task);
  // 清空输入框
  taskInput.value = '';
});

// 事件委托处理删除逻辑
taskBar.addEventListener('click', (e) => {
  // 匹配删除按钮及其内部元素
  const deleteBtn = e.target.closest('.delete');
  if (deleteBtn) {
    console.log('hi');
    // 删除对应的任务项
    const taskItem = deleteBtn.closest('.task');
    taskItem.remove();
  }
});

内容的提问来源于stack exchange，提问作者KhumboMunsaka