动态生成的表格更新/删除按钮无法触发AJAX请求的解决方法

你遇到的核心问题是动态生成元素的事件绑定失效。页面加载完成后，你直接给.delete和.update按钮绑定了click事件，但这些按钮是通过AJAX请求成功后才动态插入DOM的，绑定事件时它们还不存在，所以事件根本没绑定到这些按钮上。

另外你的代码里还有几个小问题需要修正：

• delete按钮的name属性错误写成了update，应该改成delete
• 拼写错误：corse → course，credit hourse → credit hours
• buildTable函数里多次修改innerHTML会频繁触发DOM重绘，建议先拼接所有HTML再一次性赋值

jQuery的事件委托可以解决动态元素的事件绑定问题——把事件绑定到页面加载时就存在的父级元素上（比如表格的tbody#myTable），然后通过选择器过滤出实际触发事件的子元素。这样不管子元素是一开始就存在还是后来动态生成的，事件都能正常触发。

$(document).ready(function(){

  function buildTable(data){
    let tableHtml = "";
    for (var i = 0; i < data.length; i++){
      // 修正拼写错误和按钮name属性
      var row = `<tr>
                  <td>${data[i].code}</td>
                  <td>${data[i].course}</td>
                  <td>${data[i].id}</td>
                  <td><button id=${data[i].id} name="update" type="button" value="${data[i].id}" class="update">update</button></td>
                  <td><button id=${data[i].id} name="delete" type="button" value="${data[i].id}" class="delete">delete</button></td>
                </tr>`
      tableHtml += row;
    }
    // 一次性赋值，优化DOM操作
    $('#myTable').html(tableHtml);
  }

  $(".dropdown-menu li a").click(function(){
    const index = $(this).attr('index');
    $("#facultyDropdown").attr('index', index);
    $("#facultyDropdown").text($(this).text());
  });

  $("#submit").click(function() {
    console.log('alaa');
    const facultyId = $("#facultyDropdown").attr('index');
    $.ajax({
      type: "post",
      url: `/api/v1/faculties/${facultyId}`,
      success:function(res){
        courses = res;
        buildTable(courses);
        console.log('courses');
      }    
    });
  });  

  // 使用事件委托绑定delete按钮事件
  $('#myTable').on('click', '.delete', function() {
    const courseId = $(this).attr("id");
    console.log(courseId);
    $.ajax({
      type: "delete",
      url: `/api/v1/courses/${courseId}`,
      success:function(res){
        alert(`course deleted ${res}`);
        // 删除成功后重新加载课程列表，保持页面数据同步
        const facultyId = $("#facultyDropdown").attr('index');
        $.post(`/api/v1/faculties/${facultyId}`, function(res){
          buildTable(res);
        });
      }    
    });
  });  

  // 使用事件委托绑定update按钮事件
  $('#myTable').on('click', '.update', function() {
    const courseId = $(this).attr("id");
    console.log(courseId);
    $.ajax({
      type: "put",
      url: `/api/v1/courses/${courseId}`,
      success:function(res){
        alert(`course updated ${res}`);
        // 更新成功后重新加载课程列表
        const facultyId = $("#facultyDropdown").attr('index');
        $.post(`/api/v1/faculties/${facultyId}`, function(res){
          buildTable(res);
        });
      }    
    });
  });  
});

• 事件委托绑定到#myTable比绑定到document更高效，因为事件冒泡的层级更少
• 删除/更新成功后重新调用接口加载课程列表，能让页面数据和后端保持同步
• 优化buildTable函数的DOM操作，减少重绘次数提升页面性能

内容的提问来源于stack exchange，提问作者3LAA HANI