jQuery UI 模态对话框：按钮图标未显示。

Question

我的模态对话框完美地工作（也就是说，我可以调整每个选项），只是按钮图标选项没有效果。这是我用来生成对话框的代码：

$('#alert_div')
    .attr("title", "Delete all instances?")
    .text("Are you sure you want to delete all instances of this event between the specificed dates?  This cannot be undone.")
    .dialog({
        modal: true,
        draggable: false,
        position: { my: "top", at: "center", of: window },
        buttons: [
            {
                text: "No",
                icons: { primary: "ui-icon-check" },
                click: function() {
                    $(this).dialog('close');
                    console.log('Clicked no.');
                }
            },
            {
                text: "Yes",
                click: function () {
                    $(this).dialog('close');
                    console.log('Clicked yes');
                }
            }
        ]
    });

我已经查看了所有相关的 Stack Overflow 问题，例如这个。除了在打开时将元素附加到按钮上，我不知道如何解决这个问题。当我在文档的其他位置创建元素并给它们正确的类时，图标会显示出来。

以下是 jQuery 在打开对话框时生成的按钮 HTML：

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>

我认为在图标属性中应该有除了'[object Object]'之外的其他内容。这是为什么？我正在使用jQuery UI v.1.12.0和jQuery v.3.0.0，而且我没有使用Bootstrap。

- Harpo Jaeger

---

更新：这里有其他人在一段时间之前在jQuery论坛上报告了几乎完全相同的问题：https://forum.jquery.com/topic/adding-icons-to-dialog-buttons-and-setting-focus - Harpo Jaeger

你有检查浏览器控制台的错误吗？你有一个我们可以查看的链接吗？或者你能创建一个 jsFiddle 或 stack snippet 吗？ - j08691

控制台没有错误，但我会创建一个jsFiddle，谢谢。请稍等。 - Harpo Jaeger

这是它：https://jsfiddle.net/harpojaeger/hmanoLof/ - Harpo Jaeger

不确定当有人在你之后评论时是否会通知你，@j08691。以防万一标记一下。谢谢。 - Harpo Jaeger

我也尝试在你的fiddle中替换1.8.5版本，这是你链接中的帖子使用的版本，但是无法使其运行。 - BobRodes

Answer 1

显然，问题是在jquery-ui 1.12.0中的一个bug。如果您在fiddle中将1.12.0替换为1.11.4，则问题会消失。

我在自己的测试环境中运行了您的代码（上面发布的代码，而不是您fiddle中的代码），一切都正常。（当时我下载了最新的稳定版本1.11.4）。似乎在调用dialog()时，button()方法没有被调用。正如您正确推测的那样，在icons元素中不应该有一个对象Object。我的按钮代码看起来像这样：

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
    <span class="ui-button-text">No</span>
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>

看起来这可能是 jQuery-UI 1.12.0 中的“真正的bug”。 :)

编辑：实际上，这是 jQuery-UI 1.12.0 中的“真正的功能”，还有一系列其他更改，其中一些会破坏与旧版本的兼容性。请查看Harpo的“新语法”链接。任何使用菜单（特别是菜单，旧版将不再工作）、单选按钮/复选框或其他几个东西的人都需要阅读它。

至于在一个按钮上放置两个图标，仍然可以通过新语法实现，但是您不能使用dialog()方法中的buttons参数。相反，您需要按照标准方式添加图标的span元素并进行设置。（升级文档说，您只需在标记中放置第二个图标span，并使用icon参数来代替原来的主要图标，但我无法在此上下文中使其生效。）因此，对于标记：

<div id="alert_div">
    <button id="okButton">
        <span class="ui-icon ui-icon-check"></span>
        Ok
        <span class="ui-icon ui-icon-circle-check"></span>
    </button>
</div>

然后：

$('#alert_div').dialog({
    open: function(e, ui) {
        $('#okButton')
        .button()
        .on('click', function() {
            $(this).dialog('close');
        });
    }
});

- BobRodes

---

谢谢！我觉得我应该能够降级到1.11.4版本而不会影响其他东西。现在的问题是：我该如何报告这个错误/帮助修复它呢？我只需要在GitHub上开一个新的问题（https://github.com/jquery/api.jqueryui.com/issues），还是需要以某种方式使用jQuery的Trac系统？ - Harpo Jaeger

我不知道，但是在谷歌上搜索“jquery ui报告bug”会显示这个页面：https://bugs.jqueryui.com/。我建议从那里开始。 - BobRodes

好的，如果他们要求我这样做，我会这样做，并向GH问题提交一些内容。再次感谢您的帮助。 - Harpo Jaeger

不客气。当所有东西在我的沙盒中都正常工作时，我知道有些奇怪的事情发生了。 - BobRodes

Answer 2

请看这个例子，我们可以对它做任何事情。

使用样式来进行修改...

谢谢... :)

- Bhanu Pratap

---

这并没有回答问题。 - Harpo Jaeger

最好提供一份解释，以及代码片段而不是屏幕截图。 - pawel

Answer 3

jQuery UI 1.12引入了一种新的按钮图标语法，我确认它可以解决这个问题（请参见这个jsFiddle）。目前，它不接受废弃的选项;已经有一个PR被提交来解决这个问题。详细信息请参见我的错误报告。以下代码适用于jQuery UI 1.12和jQuery 3.1.0：

$("#alert_div")
.attr("title", "Error")
.text("Please choose a calendar and enter both start and end dates.")
.dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: { my: "top", at: "top", of: window },
    buttons: [{
        text: "OK",
        icon: "ui-icon-check",
        click: function() {
            $(this).dialog("close");
        }
    }]
});

- Harpo Jaeger