如何向jQuery Bootstrap Modal传递成功后执行的回调函数

核心思路是通过jQuery的data()方法将自定义回调函数挂载到模态框实例上，仅在模态框内部AJAX提交成功的逻辑分支中主动触发回调，取消/普通关闭模态框时不会执行该回调，避免了Bootstrap默认关闭事件不分场景触发的问题。

1. 调用端代码修正 #

var doSomething = function() {
   // 自定义业务逻辑
}

$('#aBtn').click(function() {
   const $modal = $('#myModal');
   // 将回调函数挂载到模态框实例上
   $modal.data('successCallback', doSomething);
   // 打开模态框，修正原代码笔误：#改为$
   $modal.modal('show');
});

2. 模态框内部提交逻辑处理 #

假设模态框内表单ID为modalForm，提交按钮ID为modalSubmitBtn，添加如下逻辑：

$('#modalSubmitBtn').click(function() {
  const $modal = $('#myModal');
  // 提交AJAX表单
  $.ajax({
    url: '你的业务接口地址',
    type: 'POST',
    data: $('#modalForm').serialize(),
    success: function(res) {
      // 根据实际业务规则判断是否提交成功
      if (res.code === 0) {
        // 读取并执行挂载的成功回调
        const callback = $modal.data('successCallback');
        typeof callback === 'function' && callback();
        // 提交成功后关闭模态框
        $modal.modal('hide');
      } else {
        alert('提交失败：' + res.msg);
      }
    },
    error: function() {
      alert('网络异常，请稍后重试');
    }
  })
})

3. 可选边界处理 #

模态框关闭时清空残留回调，避免下次打开时执行旧逻辑：

$('#myModal').on('hidden.bs.modal', function() {
  $(this).removeData('successCallback');
  // 可额外添加表单重置逻辑
  $('#modalForm')[0].reset();
})

补充说明 #

• 若需要给回调传递参数（如接口返回的业务数据），执行回调时直接传参即可：callback(res.data)
• 多个触发按钮打开同一个模态框时，可分别挂载不同的回调函数，互不干扰

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