Bootstrap模态框内嵌表单重复提交问题求助

嘿，这个问题我太熟了！我之前做项目的时候也踩过一模一样的坑😅

问题根源分析 #

你遇到的核心问题是事件监听被重复绑定了！

每次打开模态框（触发show.bs.modal事件）的时候，你都给保存按钮新增了一个click提交事件，但之前打开其他行模态框时绑定的事件并没有被移除。举个例子：

• 第一次打开memb1的模态框，给保存按钮绑了“提交memb1数据”的点击事件，即使你取消模态框，这个事件依然存在；
• 第二次打开memb2的模态框，又给保存按钮绑了“提交memb2数据”的点击事件；
• 这时候点击保存，两个绑定的事件会同时触发，自然就出现了两次提交的情况。

解决方案（亲测有效） #

我给你几个实用的解决思路，你可以根据自己的代码习惯选：

方案一：每次绑定新事件前，先清空旧的事件监听

这个思路很直接，就是在给保存按钮绑新事件之前，先把之前的事件监听删掉。不过要注意，不能用匿名函数，得把提交逻辑抽成独立的函数，这样才能被removeEventListener识别：

// 把提交逻辑抽成独立函数
function handleMemberSave(memberId) {
  console.log(`提交成员 ${memberId} 的更新数据`);
  // 这里写你的表单提交逻辑，比如AJAX请求
}

function updateMember() {
  const memberModal = document.getElementById('member-modal');
  const saveBtn = document.getElementById('save-member-btn');
  let currentSaveHandler = null; // 用来存当前绑定的事件函数

  if (memberModal) {
    memberModal.addEventListener('show.bs.modal', (event) => {
      // 先移除上一次绑定的事件
      if (currentSaveHandler) {
        saveBtn.removeEventListener('click', currentSaveHandler);
      }

      const triggerBtn = event.relatedTarget;
      const memberId = triggerBtn.getAttribute('data-member-id');
      // 这里写填充模态框表单数据的逻辑

      // 生成新的提交事件函数并保存引用
      currentSaveHandler = () => handleMemberSave(memberId);
      // 绑定新的事件
      saveBtn.addEventListener('click', currentSaveHandler);
    });
  }
}

方案二：只绑定一次提交事件，动态更新提交的成员ID

这个方案更简洁，不需要反复绑定/解绑事件，只给保存按钮绑一次点击事件，每次打开模态框时把当前要更新的成员ID存起来，提交时直接用最新的ID：

function updateMember() {
  const memberModal = document.getElementById('member-modal');
  const saveBtn = document.getElementById('save-member-btn');
  let targetMemberId = null; // 存当前要更新的成员ID

  if (memberModal) {
    // 模态框打开时，记录当前要更新的成员ID并填充表单
    memberModal.addEventListener('show.bs.modal', (event) => {
      const triggerBtn = event.relatedTarget;
      targetMemberId = triggerBtn.getAttribute('data-member-id');
      // 这里写填充表单数据的逻辑，比如根据memberId拉取数据赋值给表单控件
    });

    // 只绑定一次提交事件！
    saveBtn.addEventListener('click', () => {
      if (targetMemberId) {
        console.log(`提交成员 ${targetMemberId} 的更新数据`);
        // 这里写你的表单提交逻辑
        // 提交完成后可以重置targetMemberId
        targetMemberId = null;
      }
    });
  }
}

方案三：利用模态框关闭事件清理监听

还有一种思路，就是在模态框关闭（触发hidden.bs.modal事件）的时候，把保存按钮的点击事件移除掉，这样每次打开新的模态框时，按钮都是“干净”的：

function updateMember() {
  const memberModal = document.getElementById('member-modal');
  const saveBtn = document.getElementById('save-member-btn');
  let currentSaveHandler = null;

  if (memberModal) {
    memberModal.addEventListener('show.bs.modal', (event) => {
      const triggerBtn = event.relatedTarget;
      const memberId = triggerBtn.getAttribute('data-member-id');
      // 填充表单数据...

      // 绑定提交事件并保存引用
      currentSaveHandler = () => {
        console.log(`提交成员 ${memberId} 的更新数据`);
        // 提交逻辑...
      };
      saveBtn.addEventListener('click', currentSaveHandler);
    });

    // 模态框关闭时，移除保存按钮的事件监听
    memberModal.addEventListener('hidden.bs.modal', () => {
      if (currentSaveHandler) {
        saveBtn.removeEventListener('click', currentSaveHandler);
        currentSaveHandler = null;
      }
    });
  }
}

额外小提示 #

如果你用的是jQuery来绑定事件，那可以用off()方法一键清空之前的监听，写法更简单：

// 每次绑定前先清空所有click事件
$('#save-member-btn').off('click').on('click', function() {
  // 提交逻辑
});

备注：内容来源于stack exchange，提问作者Ticoincoin