Javascript jQuery UI模式对话框：按钮图标不显示

我的模式对话框工作得很好（意味着我可以调整每个选项），除了按钮图标选项没有效果。下面是我用来生成对话框的代码：

$('#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');
                }
            }
        ]
    });

我已经查看了我能找到的所有相关堆栈溢出问题–例如。除了在打开按钮上附加一个元素外，我不知道如何解决这个问题。当我在文档的其他地方创建元素并给它们适当的类时，图标会正确显示

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

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

OK

我想应该有别的东西而不是“[对象]

---

在“图标”属性中。为什么会这样？我正在使用jQueryUIV。1.12.0和jQuery v。3.0.0，我没有使用引导程序。

显然，问题是jQueryUI1.12.0中的一个bug。如果你在小提琴中用1.11.4代替1.12.0，问题就会消失

我在我自己的测试环境中运行了您的代码（您在上面发布的代码，而不是您手中的代码），一切正常。（我在5月份下载了1.11.4，当时它是最新的稳定版本。）调用

dialog（）

时，似乎没有调用

button（）

方法。正如您正确推测的，在

图标

元素中不应该有

对象

。我的按钮代码如下所示：

<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>

然后：

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

---

jQueryUI1.12引入了一个，我已经确认它解决了这个问题（请参阅）。目前，它不接受不推荐的选项；一个解决办法。有关详细信息，请参阅。以下代码适用于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");
        }
    }]
});

请看一看，例如，我们可以对它做任何事情

使用样式对其进行更改

---

谢谢……：）

更新：有人在jQuery论坛上报告了一段时间以来几乎完全相同的问题：您是否检查了浏览器控制台的错误？您有我们可以看到的链接吗，或者您可以创建一个JSFIDLE或堆栈代码段吗？控制台上没有错误，但我将创建一个JSFIDLE，谢谢。待命。这里是：我也尝试过在你的小提琴中替换1.8.5，你链接中海报使用的版本，但根本无法运行。谢谢！我想我应该能够降级到1.11.4而不破坏其他东西。所以现在的问题是：我如何报告这个bug/帮助修补它？我只是打开了一个新的GH问题（）还是需要使用jQuery的Trac？我不知道，但谷歌搜索“jQuery ui报告错误”会发现这个页面：。我会从那里开始。好吧，我会这样做，如果他们也要求我，我会向GH问题提交一些东西。再次感谢你的帮助，不客气。当它在我自己的沙盒中运行良好时，我知道发生了一些奇怪的事情。这并不能回答问题。最好是一个解释，一个代码片段而不是一个屏幕截图。

$("#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");
        }
    }]
});