回发后Bootstrap模态框show.bs.modal事件未触发致编辑无数据

这个问题我之前也碰到过，核心原因就是回发（比如ASP.NET PostBack）导致页面部分DOM重新渲染，原来绑定的事件、DataTable实例都失效了，咱们一步步来解决：

1. 改用事件委托绑定模态框的show事件 #

原来直接绑定在模态框元素上的事件，回发后模态框被重新生成，事件就丢失了。把事件绑定到不会被回发替换的父级元素（比如document）上：

// 原来的写法（回发后失效）
// $('#editModal').on('show.bs.modal', function(e) { ... })

// 改成事件委托写法
$(document).on('show.bs.modal', '#editModal', function(e) {
  // 在这里填充模态框数据
  var rowData = $(this).data('rowData');
  // 填充表单字段示例
  $('#txtUserName').val(rowData.userName);
  $('#txtEmail').val(rowData.email);
  // 其他字段依次填充...
});

2. 用事件委托绑定编辑按钮的点击事件 #

同样，编辑按钮在回发后也可能被重新渲染，所以点击事件也要用委托：

$(document).on('click', '.edit-btn', function() {
  // 获取当前点击行的DataTable数据
  var $row = $(this).closest('tr');
  var table = $('#myDataTable').DataTable();
  var rowData = table.row($row).data();

  // 把数据暂存到模态框上，方便show事件中获取
  $('#editModal').data('rowData', rowData);
  // 打开模态框
  $('#editModal').modal('show');
});

3. 回发后重新初始化DataTable #

如果回发后DataTable的表格DOM被替换了，必须重新初始化DataTable，否则连行数据都获取不到。以ASP.NET为例，可以利用PageRequestManager的endRequest事件：

$(function() {
  // 页面加载时初始化DataTable
  initDataTable();

  // 监听AJAX回发完成事件，重新初始化DataTable
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    initDataTable();
  });
});

function initDataTable() {
  // 先销毁旧实例（避免重复初始化报错）
  $('#myDataTable').DataTable().destroy();
  // 重新初始化
  $('#myDataTable').DataTable({
    // 你的DataTable配置项，比如分页、排序等
    paging: true,
    searching: true,
    // ...其他配置
  });
}

4. 每次打开模态框前清空表单 #

避免之前的数据残留，在show.bs.modal事件开头先重置表单：

$(document).on('show.bs.modal', '#editModal', function(e) {
  // 重置模态框内的表单
  $(this).find('form')[0].reset();
  
  // 再填充新数据
  var rowData = $(this).data('rowData');
  $('#txtUserName').val(rowData.userName);
  // ...其他字段
});

5. 检查元素选择器的正确性 #

回发后有些框架（比如ASP.NET）会给控件ID自动添加前缀（比如ctl00_ContentPlaceHolder1_txtUserName），导致原来的选择器找不到元素。可以用浏览器开发者工具（F12）检查回发后的元素ID，或者改用ClientIDMode="Static"让控件ID保持不变：

<asp:TextBox ID="txtUserName" runat="server" ClientIDMode="Static"></asp:TextBox>

按照上面的步骤调整后，回发再点击编辑按钮，模态框应该就能正常填充数据了。

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