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を実際にレンダリングすると、タグ内に<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...'); 

EDIT：、それはjQueryのUIのボタンのように見える mmcnickleさんのコメントを1としてlabelプロパティを持っていますあなたは使うことができます。例えば。

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

jsFiddle of it in action

jQuery UI Button Label Documentation

Answer 2

あなたはlabelオプション変更することで、jQueryのUIのボタンのテキストを変更：何が起こっているものは何でも明らかに

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