web-dev-qa-db-fra.com

Comment changer le texte du bouton dans JQuery

J'ai ce code de travail jusqu'à présent:

Fiddle: http://jsfiddle.net/r4emt/12/

À l'heure actuelle, avant d'entrer dans la saisie semi-automatique de l'interface utilisateur JQuery, le bouton indique "Bonjour". Vous pouvez taper "item" dans la complétion automatique de l'interface utilisateur JQuery et vous remarquerez que le bouton indique maintenant "Monde". Cliquez sur le bouton "monde" pour mettre l'élément dans la liste. Si vous saisissez à nouveau un élément, vous pouvez en sélectionner un et cliquer sur le bouton Remplacer d'un élément déjà dans la liste. Cependant, une fois que vous faites cela, le bouton dit toujours "monde" mais il devrait dire "bonjour" car il n'y a rien dans le champ de saisie. Si vous cliquez dans le champ de saisie puis cliquez sur supprimer ou sur la flèche de retour, il redevient "hello" mais il n'y a rien qui puisse être supprimé ou affiché à gauche de. Je pense que cela a à voir avec cette partie du code:

$('#inputWrapper').on('keyup', '#tags', function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');
    }
});

Spécifiquement la partie "keyup". Ma question est donc la suivante: comment puis-je résoudre ce problème de sorte que, chaque fois que la zone de saisie est vide, le bouton indique toujours "bonjour" et lorsqu'il y a une entrée dans le champ, le bouton indique "monde"? Merci!

javascriptjqueryjquery-uibuttonjquery-autocomplete
13
sbru

Ici est le violon qui travaille. Les modifications apportées sont:

$('#tags').keyup( function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');        
    }
});

et à la fin de votre bouton, cliquez sur:

$('#tags').val('');
$('#tags').keyup();
23
Daniel Eidson

Je sais que c'est un fil mort depuis longtemps, mais je devais ajouter ceci, car je viens de passer 2 jours à rechercher une fuite de mémoire (provoqué par le code de cette page).

IMPORTANT: N'utilisez pas le texte jQuerys () sur les éléments de bouton!

La fonction crée quelque chose dans le DOM qui ne peut pas être supprimé par empty (). Si vous appelez ensuite la fonction plusieurs fois sur une longue période, une grande quantité de déchets sera déposée dans votre DOM, ce qui provoquera des problèmes.

Voir Documentation de l'API jQuery.

(Vous ne trouvez pas exactement où cela est mentionné dans la documentation, mais c'est quelque part, je dois courir maintenant pour mon train) ...

9
User2

jsFiddle Working Demo 

    $('#inputWrapper').on('keyup', '#tags', function() {
        if($(this).val() == "") {
            $('button.addButton').html('Hello1');
        } else {
            $('button.addButton').html('World');
        }
    });
1
Mohammad Adil

Ne pourriez-vous pas simplement remettre le texte à Bonjour après avoir cliqué dessus? Ajoutez ceci au bas de votre fonction de clic sur le bouton:

$(this).text('Hello');

http://jsfiddle.net/r4emt/13/

1
indot_brad

Cette fonction ne fonctionne que la première fois, car après son exécution, l'écouteur d'événements sera toujours évalué après la remontée, ce qui permet à la zone d'entrée d'avoir toujours une valeur. Vous remarquerez qu'une fois que vous avez cliqué sur le bouton, si vous tapez quelque chose et que vous l'effacez en appuyant sur la touche Retour arrière, il redevient Bonjour.

Pour obtenir les résultats souhaités, lorsque vous cliquez sur le bouton Soumettre sur le bouton puisque vous effacez Du champ de saisie, vous pouvez également modifier le texte à cet endroit.

Voir: http://jsfiddle.net/r4emt/37/

Je viens d'ajouter:

//refreshes button name
$(this).text('Hello');

à la fin de la fonction de clic sur le bouton.

0
jth_92

Utiliser la fonction 'texte'

       $("#inputWrapper").click(function () {
        $(this).text(function(i, v){
           return v === 'Hello' ? 'World' : 'Hello'
        })
0
Tharinda_tpw

Mettez la condition comme ça

if($.trim($(this).val()) == '')

pour supprimer les espaces indésirables. En outre, vous devez remplacer le texte du bouton par "Hello" dans le gestionnaire de l'événement click

Ajoutez ceci à la fin de la fonction de clic: $(this).text('Hello');

Voici le code: http://jsfiddle.net/r4emt/34/

0
armandocj