Cambiar el texto del botón jquery mobile

Estoy usando la nueva versión de jquery mobile 1.0 alpha 1 para crear una aplicación móvil y necesito poder alternar el texto de un botón. Alternar el texto funciona bien, pero tan pronto como realice la sustitución del texto, el formato CSS se rompe.

Captura de pantalla del formato dañado : http://awesomescreenshot.com/03e2r50d2

 $("#consumed").text("Mark New"); 

Cuando creas el botón, agrega algunos elementos adicionales, algunos elementos internos de que se ven así:

   Mark Old   

Para cambiar el texto, querrá este selector:

 $("#consumed .ui-btn-text").text("Mark New"); 
 Mark Old 

Tú quieres:

 $('#consumed').text('Mark New'); $('#consumed').button('refresh'); 

El motivo es permitir que sus cambios sean compatibles con versiones anteriores de jQuery mobile.

Leí esto y varias opciones en línea y creo que puedo tener una solución más simple. Definitivamente funciona para enlaces que está convirtiendo en un botón con el atributo data-role = “button”.

Simplemente coloque el texto del botón en un tramo separado y luego cambie el contenido del tramo en su JavaScript.

p.ej

 Mark Old 

Entonces un simple

 $('#oldBtnText').html("Old"); 

Hará el trabajo. Tampoco debería ser un problema si jQuery cambia su estructura.

Escribí un plugin simple para hacer esto, ya sea para un botón basado en un enlace, o un botón . Entonces si tienes

  

o

 Start 

De cualquier manera, puede cambiar el texto que se muestra con

 $("#start-button").changeButtonText("Stop"); 

Aquí está el plugin:

 (function($) { /* * Changes the displayed text for a jquery mobile button. * Encapsulates the idiosyncracies of how jquery re-arranges the DOM * to display a button for either an  link or  */ $.fn.changeButtonText = function(newText) { return this.each(function() { $this = $(this); if( $this.is('a') ) { $('span.ui-btn-text',$this).text(newText); return; } if( $this.is('input') ) { $this.val(newText); // go up the tree var ctx = $this.closest('.ui-btn'); $('span.ui-btn-text',ctx).text(newText); return; } }); }; })(jQuery); 

… porque rociar tu código con dependencias sobre cómo exactamente jQuery Mobile renderiza estos botones no es una buena idea. Regla de progtwigción: si tiene que usar un truco, aíslelo en un trozo de código bien documentado y reutilizable.

Esto funciona para mí:

 $('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text'); 

solución de: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

Para marcado como

  $("#consumed").html("Mark New"); $("span > span", $("#consumed").parent()).html("Mark New"); 

En la nueva versión móvil de jquery, hay una etiqueta de intervalo interior dentro del botón.

Por lo tanto, no tiene que cambiar el texto de la etiqueta ‘a’, sino cambiar el texto del tramo interior.

p.ej

$ (“# consumed .ui-btn-text”) texto (“prueba”);

A partir de JQM 1.3.1 (¿quizás antes?), Parece que admite .text () simple.

Para aquellos interesados ​​en una solución fácil, creé un complemento llamado Audero Text Changer .

Por alguna razón, no estoy teniendo un lapso clasificado ‘ui-btn-text’ la primera vez que deseo cambiar el texto del botón. Así que lo soluciono de esta manera:

 var button = $("#consumed"); var innerTextSpan = button.find(".ui-btn-text"); // not initialized - just change label if (innerTextSpan.size() == 0) { button.text(label); // already initialized - find innerTextSpan and change its label } else { innerTextSpan.text(label); }