Comment remplacer le texte du bouton jQueryUI?

Question

J'ai un bouton que j'utilise avec jQueryUI quelque chose comme ça (simplifié).

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

Ce code rompt l'apparence du bouton, car lors de sa création dans le widget de bouton, une nouvelle plage est ajoutée à l'intérieur du bouton. Donc je change la valeur du bouton comme ça maintenant

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

C'est hacky car je ne peux plus traiter le bouton comme une boîte noire et je dois y entrer.

Existe-t-il un moyen propre de procéder?

Answer 1

Peut-être pourriez-vous utiliser l'option label du bouton jQuery UI maintenant à la place?

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

aperçu jsbin ici

Answer 2

Vous pouvez utiliser la méthode .button ("refresh") après avoir modifié le texte.

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

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

Answer 3

Je ne sais pas si vous cherchez toujours une réponse à cela, mais j'ai trouvé votre question. Si vous regardez le code à partir du bouton, jQuery ajoute une ou deux balises. Donc, au lieu de réécrire le tout, j'ai remplacé le bouton .html () par le même html mais j'ai utilisé la recherche javascript () pour changer l'étiquette. C'est moche, mais ça marche. Il utilise également l'étiquette du bouton pour basculer correctement.

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

Answer 4

L'identifiant du bouton est-il toujours myButton ? Si oui, utilisez simplement

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

Answer 5

Vous devez faire .button("refresh")

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