如何动态修改jQuery UI Dialog的按钮文本及点击功能？

我定义了一个包含两个默认按钮的jQuery UI Dialog，代码如下：

var defaultButtons = [{
    text: "default"
},
{
    text: "default"
}];

$(document).ready(function () {
    $("#dialog-confirm-dynamic").dialog({
        position: {
            my: "center 10%+center",
            at: null,
            of: window
        },
        autoOpen: false,
        resizable: false,
        maxWidth: 250,
        maxHeight: 150,
        width: 250,
        height: "auto",
        modal: true,
        buttons: defaultButtons
    });
});

function showConfirm() {
    document.getElementById("confirm-dyn-inner").innerHTML = "Are you sure to do this ?";
    $("#dialog-confirm-dynamic").dialog({ title: "Delete" });
    defaultButtons[] = [{
        text: "Delete",
        click: function () {
            document.form.submit();
        }
    },
    {
        text: "Cancel",
        click: function () {
            $(this).dialog("close");
        }
    }];
    $("#dialog-confirm-dynamic").dialog("open");
}

我尝试在showConfirm()函数中修改按钮的文本与点击行为，但修改defaultButtons数组后并未生效，推测是按钮已提前渲染。请问实现该需求的最佳方法是什么？

问题原因 #

jQuery UI Dialog初始化时，会把buttons配置的数组内容复制一份到实例内部存储，后续修改原数组defaultButtons不会同步到已初始化的Dialog实例里。另外你代码里的defaultButtons[] = [...]是语法错误，正确赋值应该是defaultButtons = [...]，但就算修正这个语法，也解决不了按钮不更新的问题。

最佳解决方法：用Dialog的option方法动态更新按钮 #

jQuery UI提供了dialog("option", 配置项, 新值)的API，能直接修改已初始化Dialog的配置，包括按钮。这种方式不用修改原数组，直接作用于Dialog实例，能立即生效。

修改后的showConfirm函数代码如下：

function showConfirm() {
    document.getElementById("confirm-dyn-inner").innerHTML = "Are you sure to do this ?";
    // 设置对话框标题
    $("#dialog-confirm-dynamic").dialog("option", "title", "Delete");
    // 动态更新按钮配置
    $("#dialog-confirm-dynamic").dialog("option", "buttons", [
        {
            text: "Delete",
            click: function () {
                document.form.submit();
            }
        },
        {
            text: "Cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
    ]);
    $("#dialog-confirm-dynamic").dialog("open");
}

补充说明 #

如果后续需要恢复默认按钮，只需保留最初的defaultButtons数组，在需要时再次调用dialog("option", "buttons", defaultButtons)即可。这种方式是官方推荐的动态修改组件配置方案，比销毁重建Dialog更高效。

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