Bootstrap 4模态框隐藏后再次调用无法正常显示求助

我一眼就看出问题所在啦——你每次调用hideModal()的时候，都会给#mainModal重复绑定shown.bs.modal事件！

为什么会出现这个问题？ #

第一次调用hideModal()时，你给模态框绑定了一次shown.bs.modal事件：当模态框完全显示后，触发隐藏操作，这时候一切正常。但问题在于，每次调用hideModal()，这个事件绑定都会叠加一次。等你第二次调用$('#mainModal').modal()打开模态框时，之前绑定的shown.bs.modal事件还没有被移除，模态框刚一显示，这个事件就立刻触发，把模态框关掉，所以你会看到“先显示随即快速消失”的现象。

两种快速修复方案 #

方案1：使用一次性事件绑定

用one()代替on()，这样事件只会触发一次，触发后自动解绑，不会出现重复绑定的问题：

function hideModal(){ 
  $('#mainModal').one('shown.bs.modal', function(e) { 
    $("#mainModal").modal("hide"); 
  }); 
}

方案2：绑定前先解绑原有事件

如果你需要多次调用hideModal()，可以在每次绑定事件前，先用off()移除之前的shown.bs.modal事件绑定，避免叠加：

function hideModal(){ 
  // 先移除之前绑定的事件，再重新绑定
  $('#mainModal').off('shown.bs.modal').on('shown.bs.modal', function(e) { 
    $("#mainModal").modal("hide"); 
  }); 
}

额外提醒 #

Bootstrap模态框的事件绑定如果不注意清理，很容易出现这种重复触发的问题。尤其是在函数、组件生命周期里多次调用绑定逻辑时，一定要记得要么用一次性事件，要么先解绑再绑定，避免事件叠加导致的奇怪行为。

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