Altere o texto do botão do jquery mobile

Question

Eu estou usando o jquery mobile 1.0 alpha 1 versão para construir um aplicativo móvel e preciso ser capaz de alternar o texto de um botão.Alternar o texto funciona bem, mas assim que você executar a substituição de texto a formatação css é quebrada.

Screenshot do desarrumada formatação: 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

Quando você cria o botão, ele adiciona alguns elementos adicionais, alguns internos <span> Elementos que se parecem com o seguinte:

<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>

Para alterar o texto, você deseja este seletor:

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

Answer 2

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

Você quer:

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

O motivo é permitir que suas alterações sejam compatíveis com as versões futuras do JQuery Mobile.

Answer 3

Eu li sobre isso e várias opções on -line e acho que posso ter uma solução mais simples. Definitivamente, funciona para links que você está se transformando em um botão com o atributo Data Role = "Button".

Basta colocar o texto do botão em um período separado e alterar o conteúdo do intervalo no seu JavaScript.

por exemplo

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

Então um simples

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

Vai fazer o trabalho. Também não deve ser um problema se o jQuery mudar de estrutura.

Answer 4

Eu escrevi um plugin simples para fazer isso para um botão baseado em link ou um <input type="button"> botão. Então, se você tiver

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

ou

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

De qualquer maneira, você pode alterar o texto exibido com

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

Aqui está o 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);

... Porque asplertar seu código com dependências de exatamente como o jQuery Mobile renderiza esses botões não é uma boa ideia. Regra de programação: se você precisar usar um hack, isole-o em um pedaço de código bem documentado e reutilizável.

Answer 5

Isso funciona para mim:

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

solução de:http://forum.jquery.com/topic/changing-text-works-xcept-for-buttons

Answer 6

Para marcação como

<button id="consumed">Mark Old</button>

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

Answer 7

Na nova versão móvel jQuery, há uma tag interna no botão.

Portanto, você não precisa alterar o texto da tag 'A', mas alterar o texto do intervalo interno.

por exemplo

$ ("#consumido .ui-btn-text"). Texto ("teste");

Answer 8

A partir do JQM 1.3.1 (talvez antes?) Simples .Text () parece ser suportado.

Answer 9

Para aqueles interessados em uma solução fácil, eu criei um plugin chamado Audero Texto Changer.

Answer 10

Por alguma razão, não estou com uma classificação 'UI-BTN-Text' na primeira vez que quero alterar o texto do botão. Então, eu me alternante assim:

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);
}