如何实现del按钮每次点击均触发事件？当前代码仅触发一次

问题根源 #

你的代码存在两个核心问题：

• 每次点击Add按钮时，都会重复给所有.del按钮绑定点击事件，导致旧按钮的事件被多次绑定，引发逻辑混乱；
• 重新渲染列表后生成的新删除按钮，因为用.click()绑定事件（仅对当前已存在的DOM元素生效），无法触发删除逻辑，所以看起来只能触发一次。

修复方案 #

改用事件委托绑定删除按钮的点击事件（绑定到父元素，支持动态生成的元素），同时将重复的列表渲染逻辑抽成独立函数，避免代码冗余。

修复后的完整代码 #

HTML（无需修改）

<input type="text" name="todoInput" id="todoInput">
<button class="btn">Add</button><br>
<p class="error"></p>
<div>
    <ul class="todos"></ul>
</div>

jQuery

var todos = [];

// 新增todo逻辑
$(".btn").click(function() {
    const inputVal = $("#todoInput").val().trim();
    if (inputVal.length !== 0) {
        todos.push(inputVal);
        $("#todoInput").val("");
        console.log("新数组:", todos);
        renderTodos();
    } else {
        $(".error").text("请输入内容。");
        console.log("当前数组:", todos);
    }
});

// 事件委托绑定删除按钮点击（支持动态生成元素）
$(".todos").on("click", ".del", function() {
    const index = parseInt($(this).val(), 10);
    todos.splice(index, 1);
    renderTodos();
});

// 输入框清除错误提示
$("#todoInput").on("input", function() {
    if ($(this).val().trim().length !== 0 && $(".error").text() === "请输入内容。") {
        $(".error").text("");
    }
});

// 统一渲染todo列表的函数
function renderTodos() {
    $(".todos").empty();
    todos.forEach((val, index) => {
        $(".todos").append(`<li>${val}<button class="del" value="${index}">del</button></li>`);
    });
}

关键改进点 #

• 事件委托：通过父元素.todos监听点击事件，判断目标为.del时触发逻辑，完美适配动态生成的删除按钮；
• 抽离渲染函数：将重复的列表渲染代码封装成renderTodos()，减少冗余，让逻辑更清晰；
• 移除重复绑定：删除事件绑定不再嵌套在Add按钮的点击逻辑中，避免重复绑定导致的异常；
• 输入值处理：增加trim()去除输入前后空格，优化用户体验。

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