JavaScript点击Edit按钮触发modal弹窗不生效问题排查

点击Edit按钮无法唤起模态框由5个代码错误共同导致：

• 缺少jQuery依赖：自定义country.js使用了jQuery的$语法，但页面未引入jQuery库，脚本直接抛出$ is not defined错误，所有逻辑不会执行。
• ready事件绑定失效：$('document')写法错误，document是浏览器内置顶层DOM对象，不需要用引号包裹，加引号后逻辑会查找页面中不存在的<document>标签，ready回调永远不会触发。
• ID重复违反HTML规范：th:each循环渲染每一行时，都给Edit按钮设置了相同的id="editButton"，HTML要求ID全局唯一，该写法下jQuery只会给第一行的Edit按钮绑定事件，其余行按钮点击无响应。
• Bootstrap版本语法不匹配：Add按钮使用的data-bs-*属性是Bootstrap 5的语法，但模态框内关闭按钮用的data-dismiss="modal"是Bootstrap 4及更早版本的属性，且Bootstrap 5不再支持jQuery .modal() 直接唤起弹窗的旧API。
• 动态元素事件绑定失败：如果表格数据是异步加载后动态渲染的，直接给按钮绑定事件时，DOM节点还未生成，事件无法绑定到后续渲染的按钮上。

1. 引入jQuery依赖 #

在所有vendor脚本的最前面引入本地jQuery文件，确保jQuery加载完成后，再加载bootstrap、其他插件以及自定义的country.js。

2. 修改Edit按钮属性 #

去掉循环内Edit按钮重复的ID，改用class做选择器，修改表格行内的Edit按钮代码：

<a class="btn btn-primary edit-btn">Edit</a>

3. 统一Bootstrap 5语法 #

将模态框内所有data-dismiss="modal"属性替换为Bootstrap 5对应的data-bs-dismiss="modal"，包括顶部关闭按钮和底部Close按钮：

<!-- 顶部关闭按钮 -->
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

<!-- 底部Close按钮 -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

4. 重写country.js逻辑 #

修正选择器错误，使用事件委托适配动态渲染的表格行，采用Bootstrap 5官方API唤起模态框：

$(document).ready(function(){
  // 事件委托绑定到静态父元素table上，适配动态生成的行
  $('table').on('click', '.edit-btn', function(event){
    // 阻止a标签默认的跳转/锚点定位行为
    event.preventDefault();
    // Bootstrap5 唤起模态框的标准写法
    const editModal = new bootstrap.Modal($('#editModal')[0]);
    editModal.show();
  });
});

如果需要实现点击Edit按钮自动把当前行的国家数据填充到编辑表单，可以在点击事件回调中，通过$(this).closest('tr')获取当前行的DOM节点，读取单元格内容后赋值给模态框内的对应输入框即可。

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