基于条件动态添加jQuery UI Dialog按钮失效问题求助

我来帮你搞定这个动态按钮的问题——你的代码里有几个关键小问题导致按钮没显示，咱们一步步修正：

核心问题：用错了数组扩展方式 #

jQuery UI Dialog的buttons选项是数组类型，但你用了$.extend()（这个方法是用来合并对象的），所以根本没把新按钮加到数组里。正确的做法是用数组的push()方法添加新按钮对象。

其他需要修正的细节 #

• 选择器错误：代码里的$("action-dialog").remove()少了ID选择器的#，应该写成$("#action-dialog").remove()，否则找不到对应的DOM元素。
• 避免使用eval：直接用eval(actionCallback)存在安全风险，建议让actionCallback直接传入函数，而不是字符串形式（如果必须传字符串，也可以用new Function(actionCallback)()替代，安全性更高）。

修正后的完整代码 #

function showActionDialog(title, content, actionMessage, actionCallback) {
    var actionDialog = $("<div id='action-dialog'></div>").html(content).dialog({
        dialogClass: 'no-close',
        title: title,
        resizable: false,
        height: 'auto',
        width: 'auto',
        modal: true,
        buttons: [{
            text: 'Okay',
            click: function() {
                $(this).dialog('close');
                $("#action-dialog").remove(); // 修正选择器，添加#
            }
        }]
    });
    
    // 检查actionCallback是否有效（避免空值触发逻辑）
    if (actionCallback && (typeof actionCallback === 'function' || actionCallback.trim() !== '')) {
        var buttons = actionDialog.dialog("option", "buttons"); // 获取当前按钮数组
        // 用push添加新按钮对象，而非$.extend
        buttons.push({
            text: actionMessage,
            click: function() {
                // 优先调用函数类型的回调，字符串类型则用Function执行
                if (typeof actionCallback === 'function') {
                    actionCallback.call();
                } else {
                    new Function(actionCallback)();
                }
                $(this).dialog('close');
                $("#action-dialog").remove(); // 修正选择器
            }
        });
        actionDialog.dialog("option", "buttons", buttons); // 更新对话框按钮配置
    }
}

额外提示 #

• 如果你的actionCallback本来就是函数类型，直接调用actionCallback()即可，不用call()（除非需要特意改变this指向）。
• 可以给actionCallback加更严谨的类型判断，避免无效值触发不必要的逻辑。

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