web-dev-qa-db-fra.com

L'entrée déclenche un événement de frappe au clavier deux fois

Cette question a été posée/répondue (principalement) auparavant, MAIS j'ai essayé trois choses pour empêcher l'événement de bouillonner mais rien n'a fonctionné:

return false;
e.stopPropagation();
e.preventDefault();

(return false devrait prendre en charge les deux autres, correct?)

Voici le code HTML:

<div class="tags-holder">
    <input type="text" class="addField" id="addField_<%= visit.id %>"  placeholder="add a new tag">
</div>

Et le JS (UPDATE CLEANED UP):

    $('.addField').show().keyup(function(event){
  event.preventDefault();

      if(event.keyCode == 13 || event.keyCode==9) {
    ProfilePage.createTag( this, 'nada', 'addField')
        $(this).hide().val('');

        return false;       
   }

}); 

J'ai laissé les bouchons redondants à l'intérieur, mais je ne devrais vraiment pas retourner faux, simplement tuer le bouillonnement? (en utilisant Chrome).

Indice? keyCode = 13 est "Entrée"

javascriptjquerydomjavascript-events
20
bear

Sensationnel. Votre aide a été excellente et m'a aidé à y réfléchir. 

MAIS la solution ressemble un peu à une échappatoire; efficace, mais la condition ne devrait jamais être là en premier lieu. 

La voici, que j'ai trouvée dans les commentaires d'ici: http://yuji.wordpress.com/2010/02/22/jquery-click-event-fires-twice/

    $('.plus').unbind('click').bind('click',function(e){    
console.log('clicked')
    var id=$(this).attr('plus_id');
    var field=$('<input type="text">').attr({'placeholder':'add a new tag','id': 'addField_' + id, 'visit_id':id});
    field.focus();
    field.show().keydown(function(event){
        event.stopImmediatePropagation();
        if(event.keyCode == 13 || event.keyCode==9) {
            console.log(event)
            ProfilePage.createTag( field, 'nada', 'addField')
            field.hide().val('');
            return false;       
        }
    }).click(function(e){
        return false;
    })
    ;
$(this).append(field);
return false;       
   });
11
bear

J'ai eu le même problème et j'ai utilisé la méthode ci-dessus et cela fonctionne pour moi. 

$(document).unbind('keypress').bind('keypress', function (e) {
   // some logic here
});
8
Goyat Parmod

Essayez d'abord de relier l'événement, puis de le lier, voir le code ci-dessous:

$('.addField').show().unbind('keyup').keyup(function(event){
 event.preventDefault();

  if(event.keyCode == 13 || event.keyCode==9) {
ProfilePage.createTag( this, 'nada', 'addField')
    $(this).hide().val('');

    return false;       
}

Une explication est ici , j'avais écrit un post à ce sujet sur mon nouveau blog.

6
Ghost-Man

Nous espérons que cela résoudra votre problème. Au lieu d’utiliser event.preventDefault (), utilisez les deux exemples ci-dessous. Dans le cas des navigateurs Microsoft, utilisez Event.cancelBubble = true; Dans le cas des navigateurs modèles W3C, utilisez Event.stopPropagation ();

Et au lieu d'événement Keyup, veuillez utiliser l'événement touche car, lors de la frappe, l'entrée sera envoyée au champ de saisie de sorte que les entrées que vous ne souhaitez pas afficher apparaissent sur le champ. Ainsi, l'événement du bouton Entrée sera déclenché. 

Au lieu de retourner false, utilisez event.returnValue = false.

1
AmGates

Essayez de changer toutes les instances de 

$(field).functionCall()

à 

field.functionCall()

puisque field est déjà un objet jQuery.

Ok maintenant nous avons établi que ce n'était pas l'erreur. J'ai testé dans Firefox 7 et Chrome 15 et j'ai vu que le bloc de code dans l'instruction if n'était déclenché qu'une seule fois lorsque vous appuyez sur Entrée. Essayez de vérifier que quelque chose dans la fonction createTag () ne fait pas quelque chose deux fois.

0
Yes Barry

C’est un problème qui me rend toujours fou, mais je pense que c’est la solution Renvoie simplement false, si vous répondez true, il le répète de manière aléatoire.

Réponse courte Add return false;

$("#register-form #first_name").keyup(function(event) {
console.log('hello world');
return false;

});

dans la question initiale, si vous regardez le code de près, il semble que le retour false ait été écrit une ligne trop tôt.

0
Daniel Lee

Que pensez-vous attraper l'événement quand il bouillonne. Je ne reçois qu'un seul tir avec cette page de test.

<!DOCTYPE html>
<html>
  <head>
    <title>Scratch</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.setOnLoadCallback(function (){
        $('input[type="text"]').keyup(function (){
          console.debug('keyup');
        });
      });
      google.load('jquery', '1.6.4');
    </script>
  </head>
  <body>

    <div class="something">
      <input type="text" />
    </div>
  </body>
</html>

Peut-être que c'est votre sélecteur. Est-il imbriqué dans un autre .addTag? Lorsque je modifie le sélecteur jQuery et crée également la division et que je saisis la même classe, je commence à obtenir le déclenchement de deux événements. Comme ça:

$('.thing').show().keyup(...);

...et...

<div class="thing">
    <input class="thing" type="text" />
</div>
0
mqsoh