Wie ersetze ich den Text der jQueryUI-Schaltfläche?

Ich habe eine Schaltfläche, die ich mit jQueryUI verwende, so etwas (vereinfacht).

<button id="mybutton">Play<button>
<script>
$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop');
    },
    function(){
       $(this).text('Start');
    },
);
</script>

Dieser Code verändert das Aussehen der Schaltfläche, da beim Einfügen in das Schaltflächen-Widget eine neue Spanne innerhalb der Schaltfläche hinzugefügt wird. Also ändere ich den Schaltflächenwert jetzt so

$(this).find('span').text('Stop');

Das ist hacky, weil ich den Knopf nicht mehr als Blackbox behandeln kann und hineingehen muss.

Gibt es einen sauberen Weg, dies zu tun?

Vielleicht könntest du die gebrauchen label Option der jQuery-UI-Schaltfläche jetzt stattdessen?

$("#mybutton").button().toggle(function() {
   $(this).button('option', 'label', 'Stop');
}, function() {
   $(this).button('option', 'label', 'Start');
});

jsbin-Vorschau hier

Sie können die Methode .button(“refresh”) verwenden, nachdem Sie den Text geändert haben.

$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop').button("refresh");
    },
    function(){
       $(this).text('Start').button("refresh");
    },
);

http://jqueryui.com/demos/button/#method-refresh

Nach dem Aufruf von .button() zum Erstellen einer jQuery-UI-Schaltfläche scheint der Text aus dem ursprünglichen Schaltflächenelement entfernt und in a platziert worden zu sein <span class = ui-button-text></span> innerhalb des Button-Elements.

So etwas würde funktionieren:

$("#myButton > .ui-button-text").text("New Text");

Ich weiß nicht, ob Sie immer noch nach einer Antwort darauf suchen, aber ich habe Ihre Frage gefunden. Wenn Sie sich den Code der Schaltfläche ansehen, fügt jQuery ein oder zwei Tags hinzu. Anstatt das Ganze neu zu schreiben, habe ich den Knopf ersetzt .html() mit dem gleichen HTML, aber verwendetem Javascript Suche() um das Etikett auszuwechseln. Es ist hässlich, aber es funktioniert. Es verwendet auch die Tastenbeschriftung, um korrekt umzuschalten.

var bdef = $(this).html();
var ht = "";
if (bdef.search("Nuevo") != -1) { 
    ht = $(this).html();
    $(this).html(ht.replace("Nuevo", "Lista"));
}
else {
    ht = $(this).html();
    $(this).html(ht.replace("Lista", "Nuevo"));
}

Ist immer die ID der Schaltfläche myButton? Wenn ja, dann einfach verwenden

$("#myButton").text('Stop');

Sie müssen tun .button("refresh")

$('#mybutton').text('Save').button("refresh");