changer le texte sur le bouton en utilisant jquery mobile.

Question

Je voudrais changer le texte sur le bouton en utilisant jquery mobile. Cela fonctionne si je change le rôle de données à aucun, mais je perds le formatage.

Un autre message a suggéré cela, mais cela n'a pas fonctionné.

$("cl_button1 .ui-btn-text").text("some text"); 

Answer 1

En utilisant Firebug Je trouve que le balisage HTML créé par jQuery Mobile est la suivante:

<fieldset data-inline="true" class="ui-grid-a"> 
    <div class="ui-block-a"> 
     <div data-theme="c" class="ui-btn ui-btn-icon-top ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false"> 
      <span class="ui-btn-inner ui-btn-corner-all"> 
       <span class="ui-btn-text">some text</span> 
       <span class="ui-icon ui-icon-home ui-icon-shadow"></span> 
      </span> 
      <input type="hidden" value=""> 
      <input type="hidden" value=""> 
      <input type="hidden" value=""> 
      <button data-iconpos="top" data-icon="home" data-theme="c" type="submit" class="cl_button1 ui-btn-hidden" aria-disabled="false">Click Me</button> 
     </div> 
    </div> 
</fieldset> 

Vous pouvez voir que la classe ui-btn-hidden a été ajouté à l'élément <button> d'origine et l'affichage du Le bouton est réellement rendu grâce à l'utilisation des balises <span> au-dessus de la balise <button>.

Donc, pour changer le texte pour cet élément rendu jQuery Mobile vous utilisez un sélecteur comme celui-ci:

$('.cl_button1').siblings('.ui-btn-inner').children('.ui-btn-text').text("some text"); 

Ou si vous vouliez modifier le texte du bouton clic, vous pouvez le faire:

$('.cl_button1').bind('click', function() { 
    $(this).siblings('.ui-btn-inner').children('.ui-btn-text').text("some text"); 
}); 

Voici une jsFiddle pour la démonstration: http://jsfiddle.net/SfySk/1/

Answer 2

Lorsque vous avez dit cela ne fonctionne pas:

$("cl_button1 .ui-btn-text").text("some text"); 

1. Vous avez oublié le. avant cl_button pour indiquer que vous essayez de sélectionner une classe
2. Je ne vois pas .ui-btn texte partout utilisé en tant que classe

Je suis votre code pour travailler en utilisant ceci:

$('.cl_button1').text('some text'); 

test ici: http://jsfiddle.net/S9asF/

Answer 3

Une meilleure solution est de rafraîchir la page:

$(currentPage).trigger('create'); 
$(currentPage).page(); 

Answer 4

Tous,

Les solutions ci-dessus ne semblent pas fonctionner avec JQM 1.1.1. Une façon très simple de faire cela est d'appeler.

$('.cl_button1').text('some text').button('refresh'); 

Comme par http://jquerymobile.com/test/docs/buttons/buttons-methods.html, il n'y a que trois méthodes que vous pouvez appeler sur un bouton. Cela devrait garder l'état interne de votre bouton cohérent avec l'ornement JQM UI, et être plus robuste contre les changements dans la façon dont les boutons sont rendus «jolis» à l'avenir.

Answer 5

$('#buttonx').children('.ui-btn-inner').children('.ui-btn-text').text("Some Text"); 

Answer 6

en version 1.4.5 JQM, après l'initialisation

$('#btn_input').parent().contents().filter(function(){ 
    return this.nodeType === 3; 
}).replaceWith('New Text'); 

Il fonctionne sans détruire les événements binded.