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

我有一个jQuery模式对话框，我试图在单击按钮后更改按钮上显示的文本。因此，例如，发送按钮变为“正在发送...”，并在点击时被禁用。更改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（）方法。我在这里错过了非常明显的东西吗？

来源

2011-10-18 JonoB

显然，不管发生发生在调用'。按钮（）'。如果我不得不猜测，那个函数将删除并重新创建该元素，从而消除流程中的所有样式。 –

我想你想改变按钮上的['label'属性]（http://docs.jquery.com/UI/Button#option-label）。 – mmcnickle

@mmcnickle你是对的！多么明显。请添加它作为答案，以便我可以给你信用。 – JonoB

如果你看看按钮上的html实际呈现，你会注意到<button>标记中有一个<span>。

<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的按钮有一个标签属性，您可以使用。例如。

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

jsFiddle of it in action

jQuery UI Button Label Documentation

来源

2011-10-18 16:39:26 Charlino

太棒了 - 这是正确的答案！谢谢。 – JonoB

是的，我会说设置'label'将会是更好的方法，因为您不需要依赖基础标记，这在未来的jQuery UI版本中可能会发生变化。 – mmcnickle

你改变一个jQuery UI按钮上的文本，通过改变label选项：

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

来源

2011-10-18 16:43:18 mmcnickle

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

回答

相关问题