Bootstrap Modal加载动态创建按钮表单 点击编辑无响应页面卡死排查

核心问题点 #

• 错误的模态框调用方法：Bootstrap Modal有专属官方API，你使用jQuery原生的toggle('show')是完全错误的用法。toggle()方法的参数仅支持动画时长、缓动函数、回调函数，传入字符串show会触发逻辑异常，大概率导致DOM渲染死循环，是页面直接卡死的直接原因。
• ID命名冲突：外层模态框容器ID是Modal1，内部表格ID是modal1，部分低版本浏览器或jQuery环境下ID大小写不敏感，会导致选择器匹配混乱。
• 异步逻辑顺序不合理：先触发模态框显示再发AJAX请求，会出现模态框先空白再加载内容的闪烁，且如果请求失败模态框空显示也不符合预期。
• 缺少请求异常处理，AJAX请求失败时没有兜底逻辑，容易引发后续渲染问题。

修复后的代码 #

HTML部分 #

<div class="modal fade" id="Modal1" aria-labelledby="Modal-Edit Form" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="exampleModalLabel">编辑表单</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
 <!-- 修改表格ID 避免和外层模态框ID冲突 -->
 <table cellpadding="10px" width="100%" id="editFormTable">
 </table>
 </div>
 <div class="modal-footer">
 </div>
 </div>
</div>

JavaScript部分 #

$(document).on("click", ".edit-btn", function(e) {
  // 阻止事件冒泡和默认行为 避免重复触发
  e.stopPropagation();
  e.preventDefault();
  var peid = $(this).data("eid"); 
  // 先校验eid是否存在 避免无效请求
  if(!peid) return alert('无效的记录ID');
  $.ajax({
    url: "update.php",
    type: "POST",
    data: {
      id: peid
    },
    success: function(data) {
      // 先更新表格内容
      $("#editFormTable").html(data);
      // 调用Bootstrap官方API显示模态框
      $("#Modal1").modal('show');
    },
    error: function() {
      alert('加载编辑表单失败，请重试');
    }
  });
});

额外校验点 #

• 确认已经正确引入Bootstrap的JS依赖：如果使用Bootstrap 5，关闭按钮的data-dismiss属性需要改成data-bs-dismiss，模态框调用API逻辑不变。
• 确认update.php返回的内容仅为表格的<tr><td>子元素，不要返回完整的html、body标签，避免DOM结构混乱。
• 确认编辑按钮的data-eid属性已经正确赋值，没有空值或者拼写错误。

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