Cambiar el valor de un botón de jQuery para dispositivos móviles usando jQuery

Question

Preguntando si me puede ayudar. Parece que tengo problemas para cambiar el texto de mis botones de jQuery Mobile con jQuery.

$("#myButton .ui-btn-text").text("New text"); 

El código anterior que se recomendó para una pregunta relacionada no parece funcionar.

tampoco lo hace:

$("#myButton").attr(value,"New Test"); 

El código para el botón de mi es como sigue:

<input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next"></button> 

Voy a apreciar todos los tíos de retroalimentación. Gracias

Answer 1

Actualización 2
yo estaba trabajando en un violín para otra pregunta y me di cuenta de que el marcado con 1.0b2 jQuery Mobile es un poco diferente:

<div data-theme="b" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-b ui-btn-hover-b" aria-disabled="false"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text">Show Submit Button</span> 
    </span> 

    <input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next" class="ui-btn-hidden" aria-disabled="false"> 
</div> 

Con esta marcado, que había deberá hacer lo siguiente para cambiar el texto del botón:

$('#myButton').prev('span').find('span.ui-btn-text').text("Next Text"); 

---

actualización
crédito a quien crédito merece - Como resultado, la respuesta de @ naugtur a esta pregunta, lo que hizo exactamente el mismo punto que mi edición, fue publicada antes llegué a corregir mi respuesta original.

---

no estoy muy familiarizado con jQuery Mobile y el hecho de que estaba utilizando un <input> para el botón no se registró cuando inicialmente respondí. Aquí está mi respuesta actualizada con un ejemplo de trabajo que muestra cómo podrías hacerlo.

En el caso de un <input type="button" />, jQuery Mobile parece ocultar el elemento <input> y crea un nuevo elemento <a> con el estilo que se parecen al botón. Es por eso que cuando intenta obtener y establecer el texto utilizando el ID del <input> como selector, no funciona, ya que <span> no tiene el texto que ve en la pantalla. El marcado generado ve algo como esto

<!-- This 'a' button is added dynamically by jQuery Mobile, for the input element that follows it --> 
<a role="button" href="#" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text">My Value</span> 
    </span> 
</a> 

<input type="button" data-role="button" value="My Value" id="myButton" name="answer" class="ui-btn-hidden ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" tabindex="-1" data-theme="c"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text"></span> 
    </span> 
</input> 

No he probado a cabo suficientes ejemplos para estar completamente seguros, pero esto debería funcionar

$("#myButton").prev('a').find('span.ui-btn-text').text("New Text") 

Aquí es a working example showing how to change text for both types of buttons (<a> y <input type="button">).

yo no recomendaría el uso de esta <a> más botones si puede evitarlo, aunque ya no hay una id y mi enfoque, al menos, se basa en el hecho de que el <a> correspondiente al <input type="button" /> aparece justo antes de la <input> elemento.

Answer 2

[obsoleta]

Uso de botones de ingreso tiene este inconveniente de no ser capaz de cambiar los atributos de una entrada de una manera que se propagaría a botón de jquery mobile. Entonces sólo hay manera ne:

$('#myButton').parent().find('.ui-btn-text').text('zzzzz');

Si el botón input no es necesario utilizar la aplicación sin ningún Javascript presente (o no desea que funcione sin javascript), entonces usted debe utilizar siempre <a> etiquetas, porque pueden ser contenedores.

Answer 3

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

Answer 4

Desde jQuery móvil genera HTML alrededor de su input type = "button" elemento, y el texto que se está viendo no es realmente el valor del botón, sino un texto dentro de un lapso generado. Usted puede recorrer el DOM buscando lapso real, o decirle a jQuery para volver a generar botón HTML llamando .button ("refresh"), así:

$("#MyButton").val("changed value"); 
$("#MyButton").button("refresh"); 

Se recomienda lo último, ya que permanecerá compatibles con versiones futuras de jQuery mobile, mientras que atravesar el DOM podría romperse si el equipo de jQuery elige cambiar la estructura del HTML generado para el botón.

Answer 5

Actualizado las siguientes obras para mí (similar a la respuesta de Kovac):

$('#MyButton').html('changed value').button('refresh'); 

o

$("#MyButton").val("changed value").button("refresh"); 

Answer 6

Con jquery.mobile-1.1.0 que estaba experimentando algo ligeramente diferente y tuvo problemas para revisar las respuestas y encontrar una respuesta viable. He documentado los problemas que experimenté y la solución que encontré a continuación.

Fragmento 1

<script type="text/javascript"> 
$('#task').live('pageinit', function() { 
    $('#checkin_button').html("Check-in to receive points"); 
    }); 
</script> 

Con esto, yo soy capaz de cambiar el texto, pero el método borra los tramos añadidos y clases, comprimiendo así el botón.

HTML

<div id="task_button"> 
<a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b"> 
Check-in to receive points 
</a> 
</div> 

Fragmento 2

<script type="text/javascript"> 
$('#task').live('pageinit', function() { 
    $('#checkin_button').val("Check-in to receive points"); 
    }); 
</script> 

esto no tuvo efecto sobre el texto del botón.

HTML

<div id="task_button"> 
    <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text"> 
     Original Text. 
     </span> 
    <span class="ui-icon ui-icon-check ui-icon-shadow ui-iconsize-18">&nbsp; 
</span> 
</span> 
</a> 
</div> 

Fragmento 3

<script type="text/javascript"> 
$('#task').live('pageinit', function() { 
    $('#checkin_button').val("Check-in to receive points").button("refresh"); 
    }); 
</script> 

Esto generó el siguiente mensaje de error:

no se puede llamar a los métodos en el botón antes de la inicialización; intentado llamar al método 'actualización'

cual era confuso para mí, porque esta función se llama sólo después de que se inicia la página. Leyendo más, entonces me di cuenta de la referencia de Priyank a una respuesta de trabajo en stackoverflow.com/a/7279843/61821

fragmento 4 - Trabajo

<script type="text/javascript"> 
$('#task').live('pageinit', function() { 
    $('#checkin_button .ui-btn-text').val("Check-in to receive points"); 
    }); 
</script> 

Un selector de mejor jQuery funciona como un encanto.