Question

我在JS文件中有一个函数，我用它来动态地向对话框添加按钮：

 function addNewDialogButtons(buttons, id) {
var buttonPane = $(id).parent().find('.ui-dialog-buttonset');
$(buttonPane).empty();
$.each(buttons, function (index, props) {
    var newButton = $('<button></button>', {
        id: 'btn' + id + props.id,
        text: props.text
    });
    newButton.button().unbind().on("click", props.click);
    $(buttonPane).append(newButton);
});
}

在页面中我这样做：

 var buttons;
            var titleText = "Status Details";
            if (id == null) {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save", click: function () { AddStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            else {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save Changes", click: function () { UpdateStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            $(buttons).css("border", "1px solid blue");

我在css文件中有一个类：

 .displaybutton {
font-size: x-small;
background-color: whitesmoke;
color: blue;
border: 1px solid blue;
border-radius: 10px;
}

我试图在add函数中添加类，在对话框的open函数中，以及其他几种方式，但收效甚微。它似乎唯一能做的就是将文本设置为x-small。该类的其余部分未使用，颜色，边框等。

关于如何做到这一点的任何想法？

Answer 1

问题是var按钮不是实际按钮，而只是它在函数中的定义。因此，当您稍后执行:after时，jQuery无法找到对象＆＃34;按钮＆＃34;。你有这些改进的可能性：

在函数addNewDialogButtons（）
将css信息外包到css文件中，只需添加一个类即可你的按钮。
从您的功能中返回按钮对象
addNewDialogButtons（）并将该对象用于css指令。

样式jQuery对话框按钮

1 个答案: