在打开 jqueryUI 对话框按钮后更改文本答案

【问题标题】：Changing text within jqueryUI dialog button after it is open在打开 jqueryUI 对话框按钮后更改文本
【发布时间】：2012-11-17 02:06:28
【问题描述】：

如何将取消按钮的文本从 CANCEL 更改为 CLOSE？谢谢！

$("#dialog").dialog({
    buttons     : [
        {
            text    : 'SAVE',
            click    : function() {}
        },
        {
            text    : 'CANCEL',
            click    : function() {}
        }
    ]    
});
$("#button").click(function(){alert('Please change cancel button text from "CANCEL" to "CLOSE"');});

<div id="dialog"><button id="button">Change cancel button text from "CANCEL" to "CLOSE"</button></div>

【问题讨论】：

写“关闭”而不是“取消”？
@ExplosionPills。希望它以给定的“CANCEL”文本开始，但是当用户稍后单击按钮时，文本将变为“CLOSE”。请注意，该按钮位于对话框内。
您是否尝试过文档中的设置器？ api.jqueryui.com/dialog/#option-buttons
@greener 不，但现在正在阅读。
@greener 也许我不明白，但我认为这不适用。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

为您的对话框指定类名，并从该类中选择 UI 按钮。

$('#foo').dialog({
    buttons: {
        CANCEL: function() {
            alert(1);
        }
    },
    dialogClass: 'my-dialog'
});
$('.my-dialog .ui-button-text:contains(CANCEL)').text('CLOSE');

【讨论】：

感谢 mattn。不知道对话框类。似乎它会起作用。我也不知道您如何使用...uton-text:contains(CANCEL)。请详细说明好吗？谢谢
@user1032531 哈哈，可以写$.each('.my-dialog .ui-button-text', function(){...})，但对我来说太长了。 ;)
理解输入太多 :) 仍然不确定这将如何工作。我会做实验。
ui-button-text 类元素不位于与您的对话框无关的位置。所以它不能使用从对话框类传递的选择器。所以我把 dialogClass 放到对话框中。然后你可以通过对话框类使用选择器。而contains() 是嘶嘶声选择器，可以选择包含指定文本的元素。即此代码更改可以动态更改对话框按钮。
谢谢，我会试试的。抱歉，有点困，明天才能确认。

【解决方案2】：

可以在初始化之外设置按钮的文字（documentation）：

$( "#dialog" ).dialog({
    autoOpen: true,
    buttons: [{
        text: "Cancel",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});
$( "#dialog" ).dialog( "option", "buttons", [ { text: "Close", click: function() { $( this ).dialog( "close" ); } } ] );

您也可以将其绑定到事件。

【讨论】：

谢谢更环保。这如何针对取消按钮而不是保存按钮？
它没有。但是我猜你是不是因为数据被发送到服务器（“保存”）而改变了文本，并希望向用户显示一个关闭对话框的按钮？
和你说的差不多。将打开一个新对话框，其中显示带有取消/保存按钮的打开输入表单。用户单击取消，它显然会关闭。用户点击保存，打开的输入变为不可编辑的文本（但附近有一个编辑按钮），取消按钮变为关闭。用户点击编辑按钮，关闭对话框按钮由关闭变为取消
所以实际上是保存/取消然后编辑/关闭。保存和编辑有自己的行为，因为取消/关闭是相同的（它们关闭对话框），您只想更改文本。似乎 mattn 的解决方案很合适。或者，编写所有按钮并根据需要隐藏和显示。
是的，我开始采用 create too 按钮的方法，但认为必须有更好的 awy。

【解决方案3】：

这是一件非常简单的事情:)

$( "#dialog" ).dialog( {
    "buttons" : [
    {
        id: "my-button",
        text: "My button",
        click:function() {
            $("#my-button span").text( "Our button!:)" );
        }
    } ]
} );

【讨论】：

【解决方案4】：

重要的是添加[]

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

【讨论】：