Bootbox 添加微调器图标到单击按钮？

Question

尝试找到一种方法，在单击时将 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
            }
        }
    }
});

Answer 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>');
        });
    }
});

Answer 2

另一种选择是将微调器图标添加到回调函数中的按钮。像这样：

let okBtn = document.getElementsByClassName('bootbox-accept')[0]
okBtn.disabled = true
okBtn.innerHTML = '<span class="spinner-border me-1" role="status" aria-hidden="true"></span>' + okBtn.innerHTML