Question jQuery plusieurs événements pour déclencher la même fonction


Y a-t-il un moyen d'avoir keyup, keypress, blur, et change les événements appellent la même fonction sur une ligne ou dois-je les faire séparément?

Le problème que j'ai est que j'ai besoin de valider certaines données avec une recherche db et voudrais m'assurer que la validation ne soit pas manquée dans tous les cas, qu'elle soit tapée ou collée dans la boîte.


802
2018-03-28 18:53


origine


Réponses:


Vous pouvez utiliser .on() pour lier une fonction à plusieurs événements:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Ou passez simplement la fonction en tant que paramètre aux fonctions d'événement normales:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

1464
2018-03-28 18:56



À partir de jQuery 1.7, le .on() méthode est la méthode préférée pour attacher des gestionnaires d'événements à un document. Pour les versions antérieures, le .bind() La méthode est utilisée pour attacher un gestionnaire d'événements directement aux éléments.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

49
2017-11-14 08:14



Je cherchais un moyen d'obtenir le type d'événement lorsque jQuery écoute plusieurs événements à la fois, et Google m'a mis ici.

Donc, pour ceux qui sont intéressés, event.type est ma réponse:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

Plus d'infos dans le jQuery doc.


36
2018-05-14 22:00



Vous pouvez utiliser méthode de liaison attacher la fonction à plusieurs événements. Passez simplement les noms des événements et la fonction du gestionnaire comme dans ce code:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Une autre option consiste à utiliser le support de chaînage de jquery api.


19
2018-03-28 18:55



Si vous associez le même gestionnaire d'événements à plusieurs événements, vous êtes souvent confronté au problème de l'activation simultanée de plusieurs d'entre eux (par exemple, l'utilisateur appuie sur la touche après modification, le raccourci, le changement et le flou peuvent être déclenchés).

Il semble que ce que vous voulez réellement est quelque chose comme ceci:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

12
2018-03-28 19:33



Vous pouvez définir la fonction que vous souhaitez réutiliser comme suit:

var foo = function() {...}

Et plus tard, vous pouvez définir cependant de nombreux écouteurs d'événements que vous voulez sur votre objet pour déclencher cette fonction en utilisant on ('event') en laissant un espace entre les deux comme indiqué ci-dessous:

$('#selector').on('keyup keypress blur change paste cut', foo);

10
2018-04-08 17:51



C'est comme ça que je le fais.

        $("input[name='title']").on({
            "change keyup": function(e){
                var slug = $(this).val().split(" ").join("-").toLowerCase();
                $("input[name='slug']").val(slug);
            },
        });

6
2017-11-09 12:46