jquery-confirm点击触发多模态框：与Bootstrap 3模态框冲突问题

嘿，这个问题我之前帮别人排查过，核心原因是你的事件委托被重复绑定了！

为什么会弹出多个确认框？ #

你用$('body').on('click', '.confirm', ...)这种事件委托方式时，如果这段绑定代码被多次执行（比如每次打开Bootstrap模态框时，你的脚本又重新跑了一遍这段代码），就会给body元素叠加绑定多个完全相同的点击事件监听器。

Bootstrap模态框在显示时，默认会把模态框的DOM元素移动到body的直接子节点下（这是它处理层级、滚动和遮罩的内部逻辑）。如果你的事件绑定代码刚好放在了某个会随DOM变动重复执行的逻辑里——比如模态框的shown.bs.modal回调、动态内容渲染的函数里，那每打开一次模态框，就会多绑定一次事件。最终点击.confirm按钮时，所有绑定的监听器都会同时触发，自然就弹出对应数量的确认框了。

怎么修复？ #

给你两个简单靠谱的解决方案：

1. 确保事件只绑定一次
   把事件委托代码放在只会执行一次的地方（比如页面初始化的$(document).ready()最外层），同时可以加上.off()先移除旧绑定，保险起见避免重复：

   $(document).ready(function() {
       // 先移除可能存在的旧绑定，再添加新的
       $('body').off('click', '.confirm').on('click', '.confirm', function(e) {
           e.preventDefault();
           var form = this.closest("form");
           $.confirm({
               title: "confirmation",
               content: "Are you sure?",
               buttons: {
                   'confirm': {
                       text: 'proceed',
                       keys: ['enter'],
                       btnClass: 'btn-red',
                       action: function () {
                           form.submit();
                       }
                   },
                   'cancel': {
                       text: 'cancel',
                       action: function () {
                           return false;
                       }
                   },
               }
           });
       });
   });
   

2. 改用直接绑定（如果按钮是静态元素）
   如果你的.confirm按钮是页面加载完成就存在的静态元素，完全不需要用事件委托，直接绑定点击事件就不会有重复绑定的问题：

   $(document).ready(function() {
       $('.confirm').click(function(e) {
           e.preventDefault();
           var form = this.closest("form");
           $.confirm({
               // 保持你原来的配置即可
               title: "confirmation",
               content: "Are you sure?",
               buttons: {
                   'confirm': {
                       text: 'proceed',
                       keys: ['enter'],
                       btnClass: 'btn-red',
                       action: function () {
                           form.submit();
                       }
                   },
                   'cancel': {
                       text: 'cancel',
                       action: function () {
                           return false;
                       }
                   },
               }
           });
       });
   });
   

额外提醒 #

• 先检查你的代码结构，看看这段事件绑定代码是不是不小心放在了$('#myModal').on('shown.bs.modal', function(){ ... })这类会每次模态框显示都执行的回调里，这是最常见的重复绑定诱因。
• 用事件委托时，尽量把委托元素设置得更具体（比如按钮的直接父容器，而不是全局的body），这样既能提升性能，也能减少意外的事件触发。

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