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

问题描述

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

解决方法

尚未对此进行测试，但假设您使用的是最新版本的 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",onShown: function() {
        $("[data-bb-handler='noclose']").on('click',function() {
            $(this).find(".fa").replaceWith('<i class="fa fa-spinner fa-spin fa-fw"></i>');
        });
    }
});

bootbox jquery