JS/JQuery新手求助：任务列表编辑按钮重复生成输入框

嘿，很高兴看到你在动手做任务列表——这可是前端入门超经典的练手项目！关于点击编辑按钮出现多个输入框的问题，我猜大概率是事件绑定方式不对或者没做编辑状态的判断，咱们一步步来搞定：

1. 先搞定事件绑定的坑 #

如果你是每次添加新的<li>时，都给里面的编辑按钮单独绑定click事件，那旧的编辑按钮可能会被重复绑定多次，导致点击一次触发好几遍“创建输入框”的逻辑。

这时候应该用事件委托，把点击事件绑定在父元素（比如你的<ul>）上，这样不管是原来的还是新添加的编辑按钮，点击时都会被监听到，而且不会重复绑定：

// 不要每次加li都写 $('.edit-btn').click(...)
// 改成事件委托，绑定在ul上
$('ul').on('click', '.edit-btn', function() {
  // 下面写你的编辑逻辑
});

2. 添加编辑状态判断，避免重复创建输入框 #

点击编辑按钮时，先检查当前<li>里是不是已经有编辑用的输入框了，如果有就直接返回，不要再创建新的。可以通过查找特定类名，或者给正在编辑的<li>加个标记类来实现：

$('ul').on('click', '.edit-btn', function() {
  // 找到当前点击按钮所属的li
  const $currentLi = $(this).closest('li');
  
  // 检查这个li里有没有编辑输入框，有的话直接退出
  if ($currentLi.find('.edit-input').length > 0) {
    return;
  }
  
  // 获取原来的任务文本（假设你的任务内容放在.task-text里）
  const originalContent = $currentLi.find('.task-text').text();
  
  // 创建编辑用的输入框和保存按钮
  const $editInput = $('<input type="text" class="edit-input" value="' + originalContent + '">');
  const $saveBtn = $('<button class="save-btn">保存</button>');
  
  // 替换原来的文本和编辑按钮
  $currentLi.find('.task-text').replaceWith($editInput);
  $(this).replaceWith($saveBtn);
  
  // 保存按钮的逻辑
  $saveBtn.click(function() {
    const newContent = $editInput.val().trim();
    if (newContent) {
      // 有内容就替换成新文本，恢复编辑按钮
      $editInput.replaceWith('<span class="task-text">' + newContent + '</span>');
      $(this).replaceWith('<button class="edit-btn">编辑</button>');
    } else {
      // 空内容的话，恢复原来的文本
      $editInput.replaceWith('<span class="task-text">' + originalContent + '</span>');
      $(this).replaceWith('<button class="edit-btn">编辑</button>');
    }
  });
});

配套的HTML结构建议 #

为了方便替换内容，建议你的<li>结构像这样：

<li>
  <span class="task-text">这里是任务内容</span>
  <button class="edit-btn">编辑</button>
</li>

这样一来，每次点击编辑按钮时，只会在当前<li>里创建一个输入框，而且不会因为重复绑定事件导致多次生成。

内容的提问来源于stack exchange，提问作者Lucía