javascript - SweetAlert2 弹出窗口在 .php 文件中不起作用

Question

我尝试使用以下代码在我的 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){

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

Answer 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>

希望这能回答您的问题