jQuery: cliquez sur l'événement appelé $('textarea').val().trim().longueur de temps

Bien, c'est à peu près ce qui se passe.

Nous avons tous déjà vu ça avant: bouton devient actif et cliquable seulement après que nous avons mis quelque chose dans une entrée déposée. Je suis en train de mettre cela en œuvre. Je suppose que soit j'ai pris le mauvais chemin et que je ne les ai placé ma sélecteurs jQuery différemment, ou c'est juste quelque chose de mal avec le code.

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length){
        $('.send-feedback').removeClass('inactive').click(function(){
            console.log('clicked');
        });
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})

En gros, je vois 'cliqué' dans la console plusieurs fois, mais si j'ajoute console.log('key pressed') avant la if vérifier, il est indiqué qu'une fois par keydown, comme prévu.

Des conseils?

OriginalL'auteur Anton Matyulkov | 2013-03-28

7

Vous pouvez ainsi il suffit de régler le bouton à disabled. Cela permettra d'éviter la click déclenchement de l'événement:
```
if($('textarea').val().trim().length > 0)
    $('.send-feedback').removeAttr('disabled');
else
    $('.send-feedback').attr('disabled','disabled');
```
Puis séparez vos click fonction:
```
$('textarea').on('input', function(){ ... });
$('.send-feedback').on('click', function() { ... });
```
JSFiddle exemple.

chose est, il n'est pas vraiment un bouton, mais un <a>

Dans ce cas, vous pouvez utiliser des classes, qui, je suppose, est ce que vous êtes en train de faire:

HTML:
```
<a href="#" class="send-feedback disabled">Click</a>
```
JavaScript textarea contrôle de la longueur:
```
if( $(this).val().trim().length > 0 )
    $('.send-feedback').removeClass('disabled');
else
    $('.send-feedback').addClass('disabled');
```
JavaScript cliquez sur la fonction:
```
$('.send-feedback').on('click', function(e) {
    e.preventDefault();
    if($(this).hasClass('disabled'))
        return;

    alert('Clicked!');
});
```
JSFiddle exemple.

chose est, il n'est pas vraiment un bouton, mais un <a>. Aussi, ne serait pas une IDE de mettre en évidence la dernière ligne en raison d'une double sélecteur jQuery?
Vous devriez avoir précisé que dans votre question. Permettez-moi juste de mettre à jour ma réponse.
Pas de besoin de, Richard a déjà aswered, je suis en attente pour accepter sa réponse. D'autre part, attr et removeAttr sera sûrement utile plus tard. Merci de m'aider à apprendre 🙂
J'ai ajouté un deuxième JSFiddle exemple.
Fonctionne 🙂 Merci pour l'explication détaillée

OriginalL'auteur James Donnelly

Vous reliaison l'événement de clic sur chaque événement keyup.

Modifier le code pour vérifier que le bouton est inactif avant de liaison clic en ajoutant .inactive du sélecteur:

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length){
        $('.send-feedback.inactive').removeClass('inactive').click(function(){
            console.log('clicked');
        });
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})

JSFiddle Exemple

qui résout le problème à la perfection, merci, je vais accepter la réponse quand je peux.

OriginalL'auteur Richard Dalton

1

Chaque fois que vous entrez une lettre (keyup), vous ajoutez de l'événement, cliquez à .send-feedback.

Si vous avez beaucoup de .send-feedback, vous aurez

(nbr de caractères dans le textarea) * (nombre de .envoyez-feedback)

fois la "clique" du texte apparaissent.

Vous devez uniquement ajouter l'événement click si le .send-feedback a la classe "inactif".

Ici :
```
$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length) {
        if ($('.send-feedback').hasClass('inactive')){
            $('.send-feedback').removeClass('inactive').click(function(){
                console.log('clicked');
            });
        }
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})
```
Merci pour la réponse, malheureusement, il répète la précédente 🙂
"Il répéter la précédente", signifiant que le code est incorrect, ou répéter une précédente réponse (parce que si c'est l'ancien, je ne sais pas où, mais je peux le résoudre, pour le plus tard, bien trop tard pour moi ;))
Celui que j'ai accepté 🙂

OriginalL'auteur Cyril N.
0

J'ai créé ce violon pour vous, j'espère que ça aidera:

Il va comme ceci:
```
var el = $(this);
var btn = $("#btnDoStuff");

if(el.val().length > 0)
    btn.prop("disabled", false);
else
    btn.prop("disabled", true);
```
J'espère que je n'ai pas mal compris la question.

malheureusement, ça n'aide pas. je vous remercie pour votre temps

OriginalL'auteur Dimitar Dimitrov

Vous devez vous connecter pour publier un commentaire.