Bootstrap模态框多场景调用时按钮点击事件绑定失效问题

你写的两种绑定方式都犯了同一个语法错误：

• 给addEventListener或者onclick传回调的时候，应该传函数本身的引用，你写的DuplicateName()带了执行括号，代码运行到这一行时会立刻执行DuplicateName函数，把函数的返回值（通常是undefined）绑定为点击事件的回调，等你真的点击按钮时，根本没有可执行的逻辑，自然不会生效。
• 另外你现在的写法把模态框的标题、内容、回调都写死在页面加载完成的逻辑里，多场景复用时如果反复绑定事件，还会出现回调叠加、点一次触发多次的问题。

最稳妥的方式是封装一个统一的模态框调用方法，每次调用时传入当前场景的标题、文案、按钮回调，打开模态框前先清空按钮上之前绑定的旧事件，从根源避免冲突。

第一步：封装通用调用方法 #

把下面的代码写到全局JS里即可，不需要放在document.ready中：

function showAlertModal(config) {
  // 默认配置，缺省参数自动补全
  const defaultOpt = {
    title: '系统提示',
    content: '',
    onConfirm: () => {},
    onCancel: () => {}
  }
  const options = Object.assign(defaultOpt, config)

  // 核心：先解绑两个按钮上之前绑定的所有点击事件，避免旧场景的回调残留
  $('#myModalButtonYes').off('click')
  $('#myModalButtonNo').off('click')

  // 动态更新模态框展示内容
  $('#myModalTitle').text(options.title)
  $('#myModalContent').text(options.content)

  // 绑定当前场景对应的按钮逻辑
  $('#myModalButtonYes').on('click', options.onConfirm)
  $('#myModalButtonNo').on('click', options.onCancel)

  // 弹出模态框
  $('#myModal').modal('show')
}

第二步：不同业务场景直接调用 #

需要触发模态框的地方，直接传对应配置就行，举两个场景示例：

// 场景1：检测到重复患者时触发
$('#checkPatientBtn').click(function() {
  showAlertModal({
    title: 'Duplicate Patient',
    content: 'A patient already exists with the same name and birthdate. Do you want to continue?',
    onConfirm: function() {
      // 这里写点「确认」后要执行的逻辑，比如提交表单
      console.log('继续提交患者信息')
    },
    onCancel: function() {
      // 这里写点「取消」后要执行的逻辑，比如清空表单、返回列表
      console.log('取消提交，返回患者列表')
    }
  })
})

// 场景2：设置别名时触发
$('#setAliasBtn').click(function() {
  showAlertModal({
    title: 'Alias Name',
    content: 'Do you want your First Name as Alias Name?',
    onConfirm: function() {
      // 确认后自动填充别名
      $('#aliasInput').val($('#firstNameInput').val())
    },
    onCancel: function() {
      // 取消后清空别名输入框，让用户手动填写
      $('#aliasInput').val('')
    }
  })
})

注意事项 #

不要在页面加载时就提前给模态框按钮绑定固定事件，也不要重复绑定事件前不做解绑，否则要么逻辑写死没法适配多场景，要么会出现点击一次按钮执行多次回调的异常。

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