Node.js应用中Bootbox.js确认弹窗需两次点击删除按钮的问题解决

DevOps 小满

2026-5-9

解决Bootbox.js确认弹窗后需二次点击删除的问题

你说得对，问题根源就是Bootbox的confirm是异步操作——你的askConfirm函数在弹出弹窗后，立刻就检查confirmVariable并返回结果了，但这时候用户还没点击确认/取消按钮，所以confirmVariable还是初始的false，表单自然不会提交。第二次点击时，变量已经被上次的回调修改成true，才触发了提交。

要实现一次确认就删除的效果，我们不需要依赖函数返回值，而是在用户确认删除后手动提交对应的表单，具体修改如下：

第一步：调整HTML代码

把按钮的onclick改成直接调用askConfirm，不需要return，同时把按钮元素本身传入函数，方便后续定位所属表单：

<form method="POST" action="/delete/<%= one._id %>?_method=DELETE" style="display: inline;">
  <button class="btn btn-sm btn-danger delete-button" style="color: white;" type="button" onclick="askConfirm(this, 'Warning!', 'Are you sure you want to delete this?')">
    <i class="fas fa-trash"></i>
  </button>
</form>

第二步：重写JavaScript函数

去掉全局的confirmVariable，直接在Bootbox的回调里处理表单提交逻辑：

function askConfirm(buttonEl, title, message) {
  bootbox.confirm({
    title: title,
    message: message,
    buttons: {
      cancel: { label: '<i class="fa fa-times"></i> Cancel' },
      confirm: { label: '<i class="fa fa-check"></i> Confirm' }
    },
    callback: function (result) {
      // 用户确认删除时，找到按钮所在的表单并提交
      if(result) {
        buttonEl.closest('form').submit();
      }
    }
  });
}