SweetAlert2删除表单确认按钮无响应、.then回调不触发问题求助

问题诱因 #

• 核心原因：AdminLTE默认集成的是V1版本的SweetAlert，而非你参考的SweetAlert2。V1版本的弹窗方法不返回Promise对象，完全不支持.then()链式调用语法，因此你写的回调逻辑永远不会触发，控制台也不会输出对应日志。
• 附加问题：你提供的代码中没有显式引入SweetAlert2的CSS和JS资源，若你项目的app.js内也未打包SweetAlert2，运行时实际调用的就是旧版本SweetAlert，进一步加剧API不兼容问题。

解决方法 #

1. 引入正确的SweetAlert2资源，移除旧版冲突 #

先下载SweetAlert2的静态CSS和JS文件放到项目的公共资源目录，在Blade模板对应的位置引入，同时排查项目中是否有旧版SweetAlert的引用，存在的话直接删除：

<!-- 添加到 @section('css') 区域 -->
<link rel="stylesheet" href="/css/sweetalert2.min.css">

<!-- 添加到 @section('adminlte_js') 区域，可放在app.js引入之后 -->
<script src="/js/sweetalert2.all.min.js"></script>

2. 调整表单提交逻辑避免重复触发 #

原代码中确认后调用的this.submit()是jQuery封装的提交方法，会再次触发你绑定的submit事件，导致二次弹出确认框，需要改为调用原生表单的提交方法：

$('.delete-form').submit(function(e){
    e.preventDefault();
    const nativeForm = this; // 保存原生表单对象
    let nombreElemento =  e.target.parentElement.parentElement.children[1].innerText;
    Swal.fire({
        title: `¿Estás seguro de borrar ${nombreElemento}?`,
        text: 'Recuerda que esta acción es irreversible',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#50f8ac',
        cancelButtonColor: '#d33',
        focusCancel: true,
        confirmButtonText: 'Ok, Bórralo',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        console.log('Inside.. ');
        if (result.isConfirmed) {
            nativeForm.submit(); // 原生提交不会触发绑定的submit事件
        } else {
            console.log('No confirmed!! ');
        }
    });
});

3. 排查资源加载情况 #

如果修改后仍不生效，打开浏览器开发者工具的「网络」面板，搜索sweetalert相关的加载资源，确认仅加载了SweetAlert2的资源，没有旧版本SweetAlert的资源同时加载，两个版本共存会导致API调用冲突。

内容的提问来源于stack exchange，提问作者Fernando López