Bootbox将微调器图标添加到按钮onclick？答案

【问题标题】：Bootbox add spinner icon to button onclick?Bootbox将微调器图标添加到按钮onclick？
【发布时间】：2021-07-08 06:53:01
【问题描述】：

试图找到一种方法在单击时将 fa 微调器图标添加到引导框对话框按钮。尝试在回调中更改 fa 图标，但在代码执行后它会更改，请参见下面的代码。有什么建议吗？

bootbox.dialog({
    title: "Dialog",
    message: "Text",
    buttons: {
        cancel: {
            label: "Cancel",
            className: 'btn-default',
            callback: function(){
            }
        },
        noclose: {
            label: "<i class=\"fa fa-check\"></i> OK",
            className: 'btn-primary',
            callback: function(){
                $("[data-bb-handler='noclose']").find(".fa").replaceWith('<i class="fa fa-spinner fa-spin fa-fw"></i>');
                //rest of callback code
            }
        }
    }
});

【问题讨论】：

请发布您的尝试minimal reproducible example，使用[<>] sn-p 编辑器记录输入和预期输出。

标签： jquery bootbox

【解决方案1】：

尚未对此进行测试，但假设您使用的是最新版本的 Bootbox，那么您应该能够将代码添加到 onHide 回调：

bootbox.dialog({
    title: "Dialog",
    message: "Text",
    buttons: {
        cancel: {
            label: "Cancel",
            className: 'btn-default',
            callback: function(){
            }
        },
        noclose: {
            label: "<i class=\"fa fa-check\"></i> OK",
            className: 'btn-primary',
            callback: function(){
                //rest of callback code
            }
        }
    },
    onHide: function() {
        $("[data-bb-handler='noclose']").find(".fa").replaceWith('<i class="fa fa-spinner fa-spin fa-fw"></i>');
    }
});

这将在 anything 关闭模态框时调用，因此并不是真正理想的解决方案。

另一种可能性是将点击处理程序添加到您的 noclose 按钮，您希望在 onShown 回调中执行此操作：

bootbox.dialog({
    title: "Dialog",
    message: "Text",
    buttons: {
        cancel: {
            label: "Cancel",
            className: 'btn-default',
            callback: function(){
            }
        },
        noclose: {
            label: "<i class=\"fa fa-check\"></i> OK",
            className: 'btn-primary',
            callback: function(){
                //rest of callback code
            }
        }
    },
    onShown: function() {
        $("[data-bb-handler='noclose']").on('click', function() {
            $(this).find(".fa").replaceWith('<i class="fa fa-spinner fa-spin fa-fw"></i>');
        });
    }
});

【讨论】：