SweetAlert（非SweetAlert2）回调函数无法正常触发求助

你的问题核心在于版本不匹配：你写的是SweetAlert 1.x的回调逻辑，但引入的却是SweetAlert 2.x的库，两个版本的API差异直接导致点击按钮后回调函数不执行。同时代码里还有两处小错误需要修正，下面分两种方案解决：

方案1：换回SweetAlert 1.x版本（匹配现有代码逻辑） #

SweetAlert 1.x支持直接在swal()中传入回调函数，但你当前引入的是2.x版本，所以需要替换库的引用，同时修正颜色值的错误（多了一个#）：

修正后的HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 替换为SweetAlert 1.x版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

<!-- 修正button标签闭合错误 -->
<button onclick="showMessage()" class="openStandings" data-href="page.cfm">Click Me</button>

修正后的JS代码 #

function showMessage() {
    swal({
        title: "",
        html: 'Update <b>data.</b>',
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#EF5350", // 去掉多余的#
        confirmButtonText: "Yes, Proceed",
        cancelButtonText: "Cancel",
        reverseButtons: true
    },function(isConfirmed) {
        alert(isConfirmed)
        if (isConfirmed) {
            alert($(".openStandings").attr('data-href'));
            $.ajax({
                type: "POST",
                url: $(".openStandings").attr('data-href'),
                success: function(data) {
                alert(data);
                if (data.toLowerCase().indexOf("error") >= 0) {
                    swal({
                        title: "Oops",
                        text: data,
                        type: "error",
                        showCancelButton: false,
                        confirmButtonColor: "#EF5350", // 去掉多余的#
                        confirmButtonText: "OK",
                        closeOnConfirm: true
                    });
                } else {
                    swal({
                        title: "Great",
                        text: data,
                        type: "success",
                        showCancelButton: false,
                        confirmButtonColor: "#EF5350", // 去掉多余的#
                        confirmButtonText: "OK",
                        closeOnConfirm: true
                    });
                }
            }
            })
        }
    })
}

方案2：适配SweetAlert 2.x版本（推荐，2.x为当前维护版本） #

SweetAlert 2.x已经废弃了1.x的回调参数写法，改用Promise的.then()方法处理点击后的逻辑，同时部分配置项名称有变化（比如type改为icon）：

修正后的JS代码 #

function showMessage() {
    swal({
        title: "",
        html: 'Update <b>data.</b>',
        icon: "warning", // 2.x用icon代替原type配置
        showCancelButton: true,
        confirmButtonColor: "#EF5350",
        confirmButtonText: "Yes, Proceed",
        cancelButtonText: "Cancel",
        reverseButtons: true
    }).then((isConfirmed) => {
        // 2.x中点击确认返回true，取消返回false/undefined
        alert(isConfirmed)
        if (isConfirmed) {
            alert($(".openStandings").attr('data-href'));
            $.ajax({
                type: "POST",
                url: $(".openStandings").attr('data-href'),
                success: function(data) {
                alert(data);
                if (data.toLowerCase().indexOf("error") >= 0) {
                    swal({
                        title: "Oops",
                        text: data,
                        icon: "error", // 替换type为icon
                        showCancelButton: false,
                        confirmButtonColor: "#EF5350",
                        confirmButtonText: "OK",
                        closeOnConfirm: true
                    });
                } else {
                    swal({
                        title: "Great",
                        text: data,
                        icon: "success", // 替换type为icon
                        showCancelButton: false,
                        confirmButtonColor: "#EF5350",
                        confirmButtonText: "OK",
                        closeOnConfirm: true
                    });
                }
            }
            })
        }
    })
}

额外说明 #

• 注意HTML中的button标签要正确闭合（原代码中是<button>结尾，应该改为</button>），避免DOM结构异常。
• SweetAlert 2.x是当前的活跃维护版本，功能更丰富，建议优先选择方案2。

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