DataTable集成bootstrap-confirmation时未确认即触发删除接口问题

我一眼就看出问题所在了——你在删除链接里同时绑定了onclick事件和Bootstrap Confirmation的data-toggle="confirmation"，点击时两个逻辑会同时触发，这就导致弹窗刚弹出来，删除请求已经发出去了。

要解决这个，我们需要让Confirmation插件来控制删除函数的执行时机，而不是直接用onclick硬绑定，具体修改步骤如下：

1. 移除删除链接的onclick属性，改用自定义属性存储ID #

在createdRow生成删除链接的时候，把onclick="DelBenef(' + data.ID + ');"去掉，转而把ID存在元素的自定义data-id属性里，这样后续可以通过插件回调获取：

if (data.PeutSup) {
  $('td', row).eq(6).append('<a data-toggle="confirmation" data-id="' + data.ID + '" href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a>');
}

这里把href="#"改成href="javascript:void(0);"，避免点击时页面锚点跳转的小问题

2. 给Confirmation插件添加确认回调函数 #

调整你的paramPopOverFileList配置，新增onConfirm回调，只有当用户点击确认按钮后，才调用删除接口：

// 假设你的原有paramPopOverFileList配置，新增onConfirm项
var paramPopOverFileList = {
  title: "确定要删除这条记录吗？", // 可以自定义提示语
  btnOkLabel: "确认删除",
  btnCancelLabel: "取消",
  onConfirm: function(event, element) {
    // 从自定义属性里取出ID
    var idBen = $(element).data('id');
    // 调用删除函数
    DelBenef(idBen);
  },
  onCancel: function() {
    // 取消时的逻辑，可选，比如清空状态提示
  }
};

3. 确保默认事件被阻止（可选但推荐） #

在onConfirm回调里加上event.preventDefault()，彻底避免任何意外的默认行为触发：

onConfirm: function(event, element) {
  event.preventDefault();
  var idBen = $(element).data('id');
  DelBenef(idBen);
}

这样修改后，点击删除图标只会弹出确认弹窗，只有用户确认后才会执行删除接口调用，完美解决你的问题~

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