SweetAlert2 弹出窗口在 .php 文件中不起作用答案

【问题标题】：SweetAlert2 pop-ups not working in .php fileSweetAlert2 弹出窗口在 .php 文件中不起作用
【发布时间】：2020-03-03 16:07:09
【问题描述】：

我正在尝试使用以下代码在我的 Web 应用程序中按照 SweetAlert2 输入弹出框：

按钮代码

<td>
<a class="confirmation" href="employeeindex.php?delete_id=<?php print($rowEmp['emp_id']); ?>">
<button type="submit" class="btn btn-primary" id="btn_delete">Delete</button>
</td>
</a>

SweetAlert2 代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="jquery-3.4.1.min.js"></script>
        <script src="sweetalert2.min.js"></script>
        <script>
            $('.confirmation').on('click', function(e){
                e.preventDefault();
                const href = $(this).attr('href')
                $wal.fire({
                    title : 'Are you sure?',
                    text : 'Employee Record will be deleted.',
                    showCancelButton : true,
                    confirmButtonColor : '#77dd77',
                    cancelButtonColor : '#d33',
                    confirmButtonText : 'Delete Record',
                }).then((result) => {
                    if (result.value){
                        document.location.href = href;
                    }
                })
            })
        </script>

我也尝试过使用按钮的名称如下：

$('#btn_delete').on('click', function(e){

但是，它不起作用。相反，根本不显示任何消息框，并且应用程序无法继续从数据库中删除记录。有任何想法吗？我无法弄清楚我错过了什么......

【问题讨论】：

是否有任何错误信息？究竟哪一部分不工作？您尝试过什么调试问题？
我猜到了 - 用 $wal.fire 而不是 Swal.fire ！愚蠢的错误！

标签： javascript php sweetalert2

【解决方案1】：

我看到您的代码格式错误：

<td>
<a class="confirmation" href="employeeindex.php?delete_id=<?php print($rowEmp['emp_id']); ?>">
<button type="submit" class="btn btn-primary" id="btn_delete">Delete</button>
</td>
</a>

改成：

<td>
<a class="confirmation" href="employeeindex.php?delete_id=<?php print($rowEmp['emp_id']); ?>">
<button type="submit" class="btn btn-primary" id="btn_delete">Delete</button>
</a>
</td>

在您的 javascript 上，您似乎调用了 2 个 jQuery 和 sweetAlert2 脚本，我认为你应该使用 sweetAlert2 cdn:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

而不是：

 <script src="sweetalert2.min.js"></script>

然后删除

 <script src="jquery-3.4.1.min.js"></script>

因为它已经在这里调用了：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

希望这能回答你的问题

【讨论】：