Changer le texte du bouton jquery mobile

Question

J'utilise la nouvelle version jquery mobile 1.0 alpha 1 pour créer une application mobile et je dois être en mesure de faire basculer le texte d'un bouton. Basculer le texte fonctionne bien, mais dès que vous effectuez le remplacement du texte, le formatage css est cassé.

Capture d'écran du formatage en désordre: http://awesomescreenshot.com/03e2r50d2

     <div class="ui-bar">
        <a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>
        <a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>
        <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>
    </div>

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

Answer 1

Lorsque vous créez le bouton, il ajoute des éléments supplémentaires, notamment des éléments internes <span> ressemblant à ceci:

 <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Mark Old</span>
  </span>
</a>
 

Pour changer le texte, vous aurez besoin de ce sélecteur:

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

Answer 2

 <a data-role="button" href="#" id="consumed">Mark Old</a>
 

Tu veux:

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

La raison en est d’activer la rétrocompatibilité de vos modifications avec les futures versions de jQuery mobile.

Answer 3

J'ai lu ceci en ligne et diverses options en ligne et je pense avoir une solution plus simple. Cela fonctionne vraiment pour les liens que vous êtes en train de transformer en un bouton avec l'attribut data-role = "button".

Il vous suffit de placer le texte du bouton dans une étendue distincte, puis de modifier le contenu de cette dernière dans votre JavaScript.

par exemple

 <a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>
 

Puis un simple

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

Fera le travail. Cela ne devrait pas non plus être un problème si jQuery change de structure.

Answer 4

J'ai écrit un plugin simple à faire soit pour un lien en fonction de bouton, ou un <input type="button"> bouton. Donc, si vous avez

<input type="button" id="start-button" val="Start"/>

ou

<a href="#" data-role="button" id="start-button">Start</a>

De toute façon, vous pouvez modifier le texte affiché à l'écran avec

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

Voici le 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 <a> link or <input type="button">
     */
    $.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);

... parce que l'aspersion votre code avec dépendances sur exactement comment jQuery Mobile rend ces boutons n'est pas une bonne idée. La programmation de la règle: si tu dois utiliser un hack, de l'isoler pour un bien documentés, ré-utilisable morceau de code.

Answer 5

Cela fonctionne pour moi:

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

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