动态更改jQueryUI对话框按钮

Question

尝试在运行时更改多个jQuery UI dialog()按钮。

以下代码的问题是，在dialog()的第一个实例中只显示一个按钮。应该显示两个按钮。

这里有jsFiddle：

$(function(){
    var dlg = $('#message');

    dlg.dialog({
        autoOpen:false,
        modal:true,
        width: 500,
        close: function() {
            if (seen==0 && ans > 0) {
                cnt++;
                seen++;
                dlg.html('Here is a second message');
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'OK',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
        }
    });

    $('#myDiv').hover(
        function() {
            //Hover-in
            if (cnt < 1 || (cnt > 2 && cnt < 4) || (cnt > 5 && cnt < 7)) {

                var msg = 'First display text goes here';
                dlg.html(msg);
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'Download',
                            click: function() {
                                ans++;
                                $(this).dialog('close');
                            },
                            text: 'Not now',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
            cnt++;
        },
        function() {
            //Hover-out
            //need this to prevent duplicating hover-in code (double-display dlg)
        }
    );

}); //END document.ready

- cssyphus

Answer 1

我尝试使用Object类型作为buttons的值，它可以正常工作：

dlg.dialog(
    'option',
    'buttons', {
        "Download": function () {...},
        "Not now": function () {...}
    }
);

请查看更新的 jsFiddle

对象：键是按钮标签，值是与点击相关的回调函数。

编辑：但你的数组有一个错误，必须有一个对象数组，并且缺少了 { 和 }。

'buttons', [
    {
        text: "Download",
        click: function () {...}
    },
    {
        text: "Not now",
        click: function () {...}
    }
]

请查看您的 jsFiddle 的更正

- Jérôme

---

你说得对... 我以为我已经尝试了所有的方法。不过，API文档似乎暗示我的原始代码语法是正确的？这是怎么回事..? - cssyphus

如果您喜欢数组表示法，则必须拥有对象数组，请查看我的编辑 :-) - Jérôme

非常感谢您的解释。原来方括号是用来做这个的...现在明白了。我很感激您提供的额外示例。 - cssyphus