Jquery UI 对话框按钮文本不起作用答案

【问题标题】：Jquery UI dialog buttons text not workingJquery UI 对话框按钮文本不起作用
【发布时间】：2011-07-10 16:47:57
【问题描述】：

我正在创建一个模态 JQuery UI 对话框并将结果存储在 $dialog 变量中。按钮会根据选择的操作而变化，所以我使用这样的函数调用来设置按钮：

$dialog.dialog( "option", "buttons", [
    {
        text: "Ok",
        click: function() { close_project(); }
    },
    {
        text: "Cancel",
        click: function() { ($this).dialog("close"); }
    }
]);

这将显示两个按钮，其中包含文本“0”和“1”，而不是“确定”和“取消”。此外，点击功能似乎不起作用。

我已经检查了很多次，语法看起来是正确的。我做错了什么？

【问题讨论】：

您的语法似乎是正确的。是否有其他代码修改对话框？

标签： jquery user-interface button dialog

【解决方案1】：

对此的 jQuery UI 帮助说您正在使用的方法是用于已经初始化的模式 - http://jqueryui.com/demos/dialog/#option-buttons 是这样吗？

如果没有，试试这个，然后试验它有什么不同或适合你的解决方案：

$dialog.dialog({ buttons: [
    {
        text: "Ok",
        click: function() { close_project(); }
    },
    {
        text: "Cancel",
        click: function() { $(this).dialog("close"); }
    }
]});

【讨论】：

【解决方案2】：

你可以试试这个语法：

$dialog.dialog( "option", "buttons", {
       "Ok": function() { close_project(); },
       "Cancel": function() { $(this).dialog("close"); }
    }
);

【讨论】：

【解决方案3】：

我遇到了同样的“0 1”按钮标签问题。我“需要”按钮的数组语法而不是对象语法，因为我想设置按钮 id（我的代码看起来像 rdamborsky 的 ids 设置但仍然无法工作）。我看了这个问题：

jQuery UI Dialog Button Icons

并修改了问题中的尝试代码。对于您的具体示例：

$dialog.dialog({ buttons: {
        "Ok": function() { close_project(); },
        "Cancel": function() { $(this).dialog("close"); }
    },
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').attr("id", "cancel_button");
        $('.ui-dialog-buttonpane').find('button:contains("Ok")').attr("id", "ok_button");
}});

顺便说一句，当我认为您的代码中的意思是 $(this) 时，我注意到了 ($this)。这可能会一键搞砸。另一个点击可能有问题（但只有在 ajax 请求中以某种方式出现）：如果您在 IE 7 或 8 中，请稍作更改以规避 IE (ajax) 范围问题。在您的 $dialog.dialog 代码之前，执行“window.close_project = close_project;”然后调用“window.close_project();”在点击功能中。

仅供参考，如果您不需要更改 id 或类或其他任何内容，请删除“open”并使用按钮的对象语法。或者，只需使用 amurra 的答案。

【讨论】：

【解决方案4】：

setter 似乎无法正常工作。相反，我所做的是对对话框进行完全初始化，同时设置所有选项：

<script type="text/javascript">
    $("#DiscardDialog").dialog(
    {
        autoOpen: false,
        title: "Discard",
        buttons:
        {
            "Yes": function()
            {
                window.location = "@Url.Action("Discard", new { ID = this.Model.ID })";
            },
            "No": function()
            {
                $(this).dialog("close");
            }
        }
    });
</script>

【讨论】：

+1 表示自动打开：false。没见过这是其他例子。

【解决方案5】：

这也有效：

buttons: {
        'Do some action': function () {
            //a button called 'Do some action' is created
        },
        Close: function () {
            //a button called 'Close' is created
            $(this).dialog('close');
        }
    },
    open: function () {
        //event fires when dialog opens
    },
    close: function () {
        //event fires when dialog closes
    }

【讨论】：

【解决方案6】：

“文本”选项是一个布尔标志，用于指定是否应显示来自标签的文本。也许您应该尝试更改按钮的 .html() 例如

$("#Button1").html("Ok");

【讨论】：

【解决方案7】：

这对我有用

$("#dialog-form").dialog
(
{
    autoOpen: false,
        height: 300,
    width: 350,
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
       'Guardar' : function()
        {
            $("#dialog-form").dialog( "close" );
            $(this).html("Guardar");
         },
        Cancel: function()
         {
            $(this).html("Cancelar");
            $("#dialog-form").dialog( "close" );
        }
    }
});

【讨论】：