HTML按钮绑定AJAX调用失效问题求助

点击按钮时应触发的AJAX调用无法正常工作，相关代码如下：

HTML代码 #

<td><button id=${data[i].id} name="update" type="button" value="${data[i].id}" class="btn btn-primary update">update</button></td>
<td><button id=${data[i].id} name="drop" type="button" value="${data[i].id}" class="btn btn-primary drop">drop</button></td>

AJAX代码 #

$(document).ready(function() {
  $(".drop").click(function() {
    const corseid = $(this).attr("id");
    console.log(corseid);
    $.ajax({
      type: "delete",
      url: `/api/v1/courses/3`,
      success: function(res) {
        alert(`course deleted ${res}`)
      }
    });
  });
});

问题分析 #

1. ID重复冲突：update和drop按钮共用同一个${data[i].id}作为ID，违反HTML中ID必须唯一的规范，会导致事件绑定、元素选择出现异常。
2. URL固定且变量未生效：AJAX请求的URL写死为/api/v1/courses/3，没有使用获取到的corseid（还存在拼写错误，应为courseid），无法实现动态删除对应ID的课程。
3. 无错误处理机制：仅设置了success回调，未处理请求失败场景，无法排查后端报错、跨域、请求方法不支持等问题。
4. 动态元素事件绑定失效：如果按钮是通过JS动态渲染生成的，直接用.click()绑定事件仅对DOM加载完成时已存在的元素生效，动态生成的按钮无法触发事件。

修复方案 #

1. 修正ID唯一性：给按钮ID添加前缀区分，或者直接通过value属性获取ID（更稳妥，避免ID冲突）。
2. 修正变量拼写并动态生成URL：将corseid改为courseid，并把变量代入URL实现动态请求。
3. 添加错误处理：增加error回调，打印错误信息便于排查问题。
4. 改用事件委托：针对动态生成的元素，用事件委托绑定点击事件，确保所有.drop按钮都能触发AJAX请求。

修改后的代码示例 #

修正后的HTML

<td><button id="update-${data[i].id}" name="update" type="button" value="${data[i].id}" class="btn btn-primary update">update</button></td>
<td><button id="drop-${data[i].id}" name="drop" type="button" value="${data[i].id}" class="btn btn-primary drop">drop</button></td>

修正后的AJAX代码

$(document).ready(function() {
  // 事件委托处理动态生成的按钮
  $(document).on('click', '.drop', function() {
    const courseid = $(this).val(); // 通过value属性获取课程ID
    console.log(courseid);
    $.ajax({
      type: "DELETE", // HTTP方法大写符合规范
      url: `/api/v1/courses/${courseid}`,
      success: function(res) {
        alert(`课程已删除：${res}`);
        // 可在此添加页面更新逻辑，比如移除当前按钮所在的表格行
      },
      error: function(xhr, status, error) {
        console.error('删除失败详情:', error);
        alert(`删除失败：${error}`);
      }
    });
  });
});

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