点击确认弹窗取消后Delete按钮仍执行操作的代码修正方案

核心问题是删除流程没有根据用户的弹窗选择做分支判断——不管点击确认还是取消，后续的接口调用和行删除逻辑都直接执行了。以下是针对不同弹窗场景的修正代码：

原生confirm弹窗的修正 #

错误示例（问题代码） #

// 错误：弹窗选择不影响后续执行
$('.delete-btn').on('click', function() {
  confirm('确定要删除这条数据吗？');
  // 无论弹窗点啥，都会走到这一步
  const id = $(this).data('id');
  deleteData(id).then(() => {
    $(this).closest('tr').remove();
    $('#dataTable').DataTable().draw(false);
  });
});

修正后代码 #

$('.delete-btn').on('click', function() {
  const id = $(this).data('id');
  const $row = $(this).closest('tr');
  
  // 仅在用户点击「确认」时执行删除流程
  if (confirm('确定要删除这条数据吗？')) {
    deleteData(id)
      .then(() => {
        // 接口调用成功后再删除表格行
        $row.remove();
        // 更新DataTable视图，保持当前分页位置
        $('#dataTable').DataTable().draw(false);
      })
      .catch(err => {
        console.error('删除失败:', err);
        alert('删除失败，请重试');
      });
  }
  // 点击「取消」时，无任何操作，流程直接终止
});

Bootstrap模态框弹窗的修正（如果使用Bootstrap弹窗） #

模态框HTML #

<div class="modal fade" id="deleteConfirmModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">确定要删除这条数据吗？</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="doDelete">确认删除</button>
      </div>
    </div>
  </div>
</div>

修正后JS代码 #

// 存储当前要删除的数据ID和行元素
let targetDeleteId;
let targetDeleteRow;

// 点击Delete按钮时，记录目标数据并打开弹窗
$('.delete-btn').on('click', function() {
  targetDeleteId = $(this).data('id');
  targetDeleteRow = $(this).closest('tr');
  const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
  modal.show();
});

// 点击弹窗的「确认删除」按钮时，执行删除流程
$('#doDelete').on('click', function() {
  deleteData(targetDeleteId)
    .then(() => {
      targetDeleteRow.remove();
      $('#dataTable').DataTable().draw(false);
      // 关闭弹窗
      bootstrap.Modal.getInstance(document.getElementById('deleteConfirmModal')).hide();
    })
    .catch(err => {
      console.error('删除失败:', err);
      alert('删除失败，请重试');
    });
});

核心逻辑说明 #

• 把接口调用、表格行删除的代码，严格放在用户确认操作的分支/回调里
• 点击「取消」时不进入该分支，自然终止删除流程
• 如果使用DataTable插件，删除行后必须调用draw(false)更新视图，false参数能保持当前分页位置，避免页面跳转

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