SweetAlert2 不显示

Question

我正在尝试在网络应用程序中实现 SweetAlert2，在检查论坛和网站后，我没有在代码中看到任何错误，但无法看到消息

我正在测试的页面包含一个链接按钮，可以从数据库中删除一条记录。注册表将其删除，但没有出现 SweetAlert2 消息

此页面包含以下内容：

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

在充当按钮的链接中，我有 id id="btnConfirm"

<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"></td>

在 jscript.js 文件中，我有以下内容：

A constant that creates the object with the same name as the id, the addEventListener event that calls the function when clicked.

const $btnConfirm = document.querySelector("#btnConfirm");
$btnConfirm.addEventListener("click", mgsDelete);
function mgsDelete() {
Swal.fire({
  title: "YOU ARE DELETING A RECORD",
  text: "¿Are you sure?",
  type: "warning",
  showCancelButton: true,

  confirmButtonText: "Yes, Delete",
  cancelButtonText: "No, Cancel",
  closeOnConfirm: false,
  closeOnCancel: false,
},
function (isConfirm) {
  if (isConfirm) {
    Swal.fire("Deleted", "The record has been deleted!!!");
  } else {
    Swal.fire("Cancelled", "The record has NOT been deleted!!!");
  }
});
}

正如我所说，该消息没有出现，我不知道还能在哪里查看。

如果有人能帮我看看问题出在哪里，我将不胜感激。

提前非常感谢您。

Answer 1

这里的问题是，在让用户有机会选择“是”或“否”之前，您正在导航（由于锚标记行为）到不同的 URL 事件。

为了解决这个问题，您应该首先确保您自己的脚本应该在 sweetalert 脚本之后 和 在页面 html 内容加载之后加载。

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

不知道为什么这里有两个 sweetalert 脚本

接下来，正如 brombeer 所评论的，您缺少结束锚标记。所以你需要确保它是关闭的。

接下来，在脚本中，您需要首先阻止事件侦听器回调中的默认锚点操作。 Sweetalert 为我们提供了回调函数，其中包含有关用户看到弹出窗口时所做操作的一些信息。在我们的例子中，我们需要他是否确认（isConfirmed）。基于此，当实际删除发生时，我们需要将用户导航到正确的 URL。

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

function mgsDelete(e) {
  e.preventDefault(); // preventing default anchor navigation
  const linkTarget = e.target.href;
  Swal.fire({
    title: "YOU ARE DELETING A RECORD",
    text: "¿Are you sure?",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, Delete",
    cancelButtonText: "No, Cancel",
    closeOnConfirm: false,
    closeOnCancel: false,
  }).then(({
    isConfirmed
  }) => {
    if (isConfirmed) {
      // The alerts defined here should be moved inside del_register.php page after records are deleted.
      Swal.fire("Deleted", "The record has been deleted!!!");
      window.location.href = linkTarget;
    } else {
      Swal.fire("Cancelled", "The record has NOT been deleted!!!");
    }
  });
}

我看到您在确认后再次显示警报。在我看来，这些应该在实际删除发生后定义。假设在

del_register.php

页面内。

希望这有帮助。