待办列表Edit按钮onclick仅首次触发，二次点击无效求助

问题原因 #

1. 首次点击编辑按钮时，edit()函数会给按钮额外添加一个click事件监听器，但按钮原本的内联onclick="edit()"并未移除。第二次点击时，会同时触发原edit()和新添加的监听器，导致状态逻辑混乱。
2. 每次点击编辑按钮都会重复添加监听器，累积的事件会进一步加剧问题。
3. 从localStorage加载任务后，动态生成的按钮虽保留内联onclick，但重复绑定事件的问题依然存在。

修复方案 #

改用事件委托处理所有动态生成元素的点击事件，避免内联事件和重复绑定的问题，同时通过状态判断实现编辑/保存的切换逻辑。

修改后的完整代码 #

HTML 部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <link rel="stylesheet" href="./style.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>To-Do List</h1>
      <input type="text" placeholder="Add new task">
      <button id="add-button">Add</button>
    <ul id="task-list">
    </ul>
  </body>
</html>

JavaScript 部分

const taskList = document.getElementById('task-list');
const taskInput = document.querySelector('input[type="text"]');
const addButton = document.getElementById('add-button');

// 页面加载时恢复任务
window.onload = () => {
  let savedTasks = localStorage.getItem('tasksList');
  if (savedTasks) {
    taskList.innerHTML = savedTasks;
  }
};

// 添加新任务
addButton.addEventListener('click', () => {
  let title = taskInput.value.trim();
  if (!title) return; // 过滤空任务

  const taskElement = document.createElement('li');
  taskElement.classList.add('task');
  taskElement.innerHTML = `
    <input type="checkbox" class="checkBox">
    <span class="title">${title}</span>
    <button class="edit">Edit</button>
    <button class="delete">Delete</button>
  `;
  taskList.appendChild(taskElement);
  taskInput.value = '';
  saveTasks();
});

// 事件委托处理所有按钮点击
taskList.addEventListener('click', (e) => {
  const target = e.target;
  const parentLi = target.closest('.task');
  if (!parentLi) return;

  // 编辑/保存逻辑
  if (target.classList.contains('edit')) {
    const titleSpan = parentLi.querySelector('.title');
    const editBtn = parentLi.querySelector('.edit');

    if (editBtn.innerText === 'Edit') {
      titleSpan.contentEditable = true;
      titleSpan.focus();
      editBtn.innerText = 'Save';
    } else {
      titleSpan.contentEditable = false;
      editBtn.innerText = 'Edit';
      saveTasks();
    }
  }

  // 删除逻辑
  if (target.classList.contains('delete')) {
    parentLi.remove();
    saveTasks();
  }
});

// 复选框状态切换
taskList.addEventListener('change', (e) => {
  const target = e.target;
  if (target.classList.contains('checkBox')) {
    const parentLi = target.closest('.task');
    const titleSpan = parentLi.querySelector('.title');
    titleSpan.classList.toggle('checked', target.checked);
    saveTasks();
  }
});

// 统一保存任务到localStorage
function saveTasks() {
  localStorage.setItem('tasksList', taskList.innerHTML);
}

关键修改点 #

1. 移除所有内联事件：删除HTML和JS中的onclick内联绑定，改用事件委托统一处理动态元素事件。
2. 事件委托：通过父元素taskList绑定事件，自动覆盖后续添加的任务元素，无需逐个绑定。
3. 状态判断代替重复绑定：编辑按钮通过文本状态（Edit/Save）切换逻辑，避免重复添加事件监听器。
4. 统一保存函数：封装saveTasks()减少重复代码，确保所有状态变更后都能同步到本地存储。
5. 空任务过滤：添加任务前校验输入内容，避免无效任务生成。

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