用户增删改功能异常：新增正常但编辑删除按钮失效求助

嘿，我猜你遇到的核心问题是动态生成的编辑/删除按钮没法响应点击事件对吧？这其实是前端开发里很常见的小坑——当你在$(document).ready()里直接给.editBtn或者.deleteBtn绑定点击事件时，这些按钮还没被创建出来呢（它们是在点击添加按钮后才生成的），所以事件根本没绑定到它们身上。

解决方案：用jQuery事件委托 #

我们可以把事件绑定到一个页面加载时就存在的父元素（比如你的用户表格，或者document）上，然后通过选择器过滤出真正要触发事件的目标按钮。这样不管后续动态生成多少按钮，事件都能正常触发。

修改后的代码示例 #

我结合你给出的代码片段，补全并调整了事件绑定的部分：

var nextId = 1; 
var activeId = 0; 

$(document).ready(function() { 
  // 添加用户的逻辑
  $("#addBtn").on("click", function() { 
    var name = $("#txtNome").val(); 
    var age = $("#txtIdade").val();
    if (name.trim().length < 3 || age == "") { 
      alert("Dados Incorretos, Por favor verifique os campos!");
      return;
    }

    // 动态生成表格行和按钮
    var row = `<tr>
                <td>${nextId}</td>
                <td>${name}</td>
                <td>${age}</td>
                <td>
                  <button class="editBtn" data-id="${nextId}">Editar</button>
                  <button class="deleteBtn" data-id="${nextId}">Excluir</button>
                </td>
              </tr>`;
    $("table tbody").append(row);

    // 重置输入框和自增ID
    $("#txtNome").val("");
    $("#txtIdade").val("");
    nextId++;
  });

  // 用事件委托绑定编辑按钮点击事件
  $(document).on("click", ".editBtn", function() {
    activeId = $(this).data("id");
    // 这里可以添加填充表单的逻辑，比如根据ID获取用户信息
    alert(`准备编辑ID为${activeId}的用户`);
  });

  // 用事件委托绑定删除按钮点击事件
  $(document).on("click", ".deleteBtn", function() {
    var userId = $(this).data("id");
    if (confirm(`确定要删除ID为${userId}的用户吗？`)) {
      $(this).closest("tr").remove();
      alert(`ID为${userId}的用户已删除`);
    }
  });
});

关键要点说明 #

• 我给按钮加了data-id属性，方便你获取当前操作的用户ID，这样编辑/删除时能精准定位目标。
• 事件委托的核心是$(父元素).on("事件类型", "目标元素选择器", 回调函数)，这里用document是最稳妥的（如果你的表格有固定的ID，比如#userTable，用$("#userTable")代替document性能会更好）。
• 记得检查你动态生成按钮的类名（.editBtn、.deleteBtn）要和事件委托里的选择器完全一致，不然事件还是触发不了。

你可以把这段代码替换你原来的逻辑，应该就能解决按钮没反应的问题啦！

内容的提问来源于stack exchange，提问作者Paulo Roberto LS