如何为Bootstrap Modal合并绑定两个事件以实现代码优化？

当然可以！Bootstrap基于jQuery的事件系统，而jQuery本身就支持在同一个.on()调用中通过空格分隔多个事件名称，这样你就能把两段重复的代码抽出来只写一次，既减少冗余又方便维护。

具体实现代码 #

// 合并绑定show.bs.modal和hidden.bs.modal事件
$('.modal').on('show.bs.modal hidden.bs.modal', function(event) {
  // 这里放置你原本要在两个事件里重复编写的代码
  console.log(`当前触发的模态框事件：${event.type}`);
  
  // 示例操作：比如重置模态框表单、更新页面状态等
  // $(this).find('form')[0].reset();
});

额外小技巧 #

如果之后需要针对不同事件做细微差异处理，还可以通过event.type来区分当前触发的是哪个事件，比如：

$('.modal').on('show.bs.modal hidden.bs.modal', function(event) {
  // 共享逻辑
  console.log("模态框状态变化");
  
  // 差异化逻辑
  if (event.type === 'show') {
    console.log("模态框即将显示");
  } else if (event.type === 'hidden') {
    console.log("模态框已隐藏");
  }
});

这种写法既保留了代码的复用性，又兼顾了后续扩展的灵活性，完全符合你的优化需求~

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