按钮点击功能仅执行一次，Add Todo提示每二次项才显示的技术求助

嘿，别纠结基础问题啦，大家刚开始写JS的时候都容易遇到这类小坑！我帮你分析下这两个问题的原因和解决办法：

问题1：按钮点击功能仅执行一次 #

原因 #

你应该是直接给页面初始存在的按钮绑定了click事件，但动态添加的待办项里的按钮并没有被绑定这个事件。因为当页面加载完成后绑定事件时，这些新按钮还没出现在DOM里，所以它们不会响应点击。

解决办法：用事件委托 #

把事件绑定到待办列表的父容器上，利用事件冒泡机制来处理所有（包括动态生成的）按钮点击。比如：

// 假设你的待办列表容器id是todo-list，删除按钮类名是delete-btn
$('#todo-list').on('click', '.delete-btn', function() {
  // 这里写你的删除逻辑，比如移除对应的待办项
  $(this).closest('.todo-item').remove();
});

这样不管是页面一开始就有的待办项，还是后来添加的，点击删除按钮都会触发逻辑。

问题2：Add Todo按钮仅在添加第二个待办时显示提示 #

原因 #

toggle()方法是切换元素的显示/隐藏状态，如果你的提示元素初始是显示状态，第一次点击按钮时toggle()会把它隐藏，第二次点击才会切换回显示，就出现了你看到的情况。

解决办法：主动控制显示/隐藏 #

不要用toggle()，而是在成功添加待办项后，主动显示提示，还可以加个延迟让它自动消失，体验更好：

// 完成添加待办项的逻辑后
$('.notification').show().delay(2000).fadeOut();

这样每次点击添加按钮，都会立刻显示“Added todo item!”提示，2秒后自动淡出，完全符合预期。如果提示元素初始是隐藏的，记得先在CSS里设置display: none，确保第一次就能正常显示。

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