SweetAlert2弹窗不显示求助：删除功能正常但无提示弹窗

核心问题分析 #

点击删除链接时，数据库记录能正常删除但弹窗不显示，主要是资源加载顺序冲突、链接默认跳转打断弹窗逻辑、SweetAlert2语法版本不兼容这几个原因导致的，以下是具体修复步骤：

1. 修复资源引入问题 #

你重复引入了两次SweetAlert2资源，且自定义脚本加载顺序错误：

• 同时引入本地sweetalert2.all.min.js和CDN的sweetalert2@11会导致版本冲突，必须删掉其中一个
• 自定义脚本jscript.js必须放在SweetAlert2资源之后加载，否则调用Swal时组件还未初始化

修改后的资源引入代码：

<link rel="stylesheet" type="text/css" href="../../../css/sweetAlert.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="../../../js/jscript.js"></script>

2. 阻止链接默认跳转行为 #

<a>标签点击会立即触发页面跳转，弹窗逻辑还没执行就被打断了，必须先阻止默认行为，确认后再手动跳转：

修改jscript.js代码：

const $btnConfirm = document.querySelector("#btnConfirm");
$btnConfirm.addEventListener("click", mgsDelete);

function mgsDelete(event) {
  // 阻止链接默认跳转
  event.preventDefault();
  // 保存链接地址，用于确认后跳转
  const deleteUrl = this.href;

  Swal.fire({
    title: "YOU ARE DELETING A RECORD",
    text: "¿Are you sure?",
    icon: "warning", // 新版本用icon替代旧版的type
    showCancelButton: true,
    confirmButtonText: "Yes, Delete",
    cancelButtonText: "No, Cancel"
  }).then((result) => {
    if (result.isConfirmed) {
      // 确认后跳转到删除接口
      window.location.href = deleteUrl;
      // 注：跳转后当前页面会被替换，若要显示删除成功弹窗，需在del_register.php页面添加弹窗逻辑
      Swal.fire("Deleted", "The record has been deleted!!!", "success");
    } else {
      Swal.fire("Cancelled", "The record has NOT been deleted!!!", "error");
    }
  });
}

3. 修复SweetAlert2语法兼容问题 #

你使用了旧版SweetAlert2的语法，新版本已废弃部分参数并调整了回调逻辑：

• 把type: "warning"改为icon: "warning"
• 移除closeOnConfirm和closeOnCancel，新版本默认点击按钮后关闭弹窗
• 用result.isConfirmed代替旧版的isConfirm判断用户操作

4. 检查HTML标签完整性 #

你的删除按钮<a>标签未闭合，可能导致DOM元素选择异常，补充闭合标签：

<td>
  <a id="btnConfirm" href="del_register.php?Del=<?php echo base64_encode($row['id_mov']); ?>&Page=<?php echo base64_encode('movimientos'); ?>">
    <img src="../../../images/delete.png" alt="Borrar Registro" title="Borrar Registro">
  </a>
</td>

额外优化建议 #

如果希望删除后在当前页面显示成功弹窗，建议改用AJAX异步请求删除，避免页面跳转：

// 示例AJAX删除逻辑
function mgsDelete(event) {
  event.preventDefault();
  const deleteUrl = this.href;

  Swal.fire({
    title: "YOU ARE DELETING A RECORD",
    text: "¿Are you sure?",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, Delete",
    cancelButtonText: "No, Cancel"
  }).then((result) => {
    if (result.isConfirmed) {
      fetch(deleteUrl)
        .then(response => response.text())
        .then(data => {
          Swal.fire("Deleted", "The record has been deleted!!!", "success");
          // 这里可添加刷新列表或移除当前行的逻辑
        })
        .catch(error => {
          Swal.fire("Error", "Failed to delete record", "error");
        });
    }
  });
}

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