Button: Span for button text is applied even if present

From: http://forum.jquery.com/topic/ui-button-fouc-small-change-proposal:

Hi There
I'm using the excellent ui button widget to convert my buttons.

I have only only issue with the widget itself. Due to the nature of the system i'm working with, it's not possible for me to create/instantiate the buttons immediately after they have loaded in the document, so there is quite an obvious FOUC.

To get around this, I apply the relevant UI styles to the relevant elements. This works nicely for some of the UI widgets (eg tabs), but does not work for buttons.

If I have the following base markup for a button, with all the relevant styles in place:
Copy code

   1. <button id="page-save" class="sledge-button ui-button-text-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
   2.         <span class="ui-button-text">
   3.                 <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
   4.                 Save   
   5.         </span>
   6. </button>


When I then instantiate a button widget on this element, the "ui-button-text" span is repeated.

Here follows my small fix for this:

jquery ui 1.8.1 : jquery.ui.button.js : line 282

change the following:

Copy code

   1. buttonText = $( "<span></span>" )


to:
Copy code

   1. buttonText = this.element.find('.ui-button-text').length ? this.element.find('.ui-button-text').text() : $( "<span></span>" )


I'm currently using this small fix, but I really do not want to adjust any of the base ui widgets. It would be uber rad if this was included in the button widget. What do you think?

The proposed enhancement could make the button-lite widget (http://github.com/jzaefferer/button-lite/) even more redudant (good thing).