更改 jquery 对话框按钮上的文本会影响按钮高度

Question

我有一个 jquery 模式对话框，我试图在单击按钮后更改按钮上显示的文本。例如，“发送”按钮更改为“正在发送...”，并且在单击时被禁用。

这一切都工作正常，但有一个问题：按钮失去了所有内部填充，并且按钮边框正好包裹在文本周围。

$('#email-dialog').dialog({
    autoOpen: false,
    height: 'auto',
    width: 'auto',
    modal: true,
    buttons: {
        "Send": function() {
            $(".ui-dialog-buttonpane button:contains('Send')").button("disable");
            $(".ui-dialog-buttonpane button:contains('Send')").button().html('Sending...');

            $.ajax({
                type: "POST",
                url: post_path,
                data: form_data,
                dataType: 'JSON',
                success: function(data) {
                    if (data.success) {
                        $("#email-dialog").dialog("close");
                    } else {
                        updateErrors(data.errors);
                        $(".ui-dialog-buttonpane button:contains('Sending...')").button("enable");
                        $(".ui-dialog-buttonpane button:contains('Sending...')").button().text('Send');
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('Error: ' + textStatus + ' ' + errorThrown);
                    $(".ui-dialog-buttonpane button:contains('Sending...')").button("enable");
                    $(".ui-dialog-buttonpane button:contains('Sending...')").button().text('Send');
                }
            });

        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

我尝试过 html() 和 text() 方法。我在这里错过了一些非常明显的东西吗？

Answer 1

如果您查看按钮实际呈现的 html，您会注意到 标记内有一个 。

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">Send</span>
</button>

因此，为了让您的代码正常工作，您可能应该执行以下操作：

$(".ui-dialog-buttonpane button:contains('Send') span").text('Sending...');

编辑： 根据 mmcnickle 的评论，看起来 jQuery UI 按钮有一个可以使用的 label 属性。例如

$(".ui-dialog-buttonpane button:contains('Send')").button('option', 'label', 'Sending...');

jsFiddle 的实际应用

jQuery UI 按钮标签文档

Answer 2

您可以通过更改 label 选项来更改 jQuery UI 按钮中的文本：

$('#button_id').button('option', 'label', 'New button text here')