Pregunta jQuery múltiples eventos para activar la misma función


¿Hay alguna manera de tener keyup, keypress, blury change eventos llaman a la misma función en una línea o tengo que hacerlos por separado?

El problema que tengo es que necesito validar algunos datos con una búsqueda de db y me gustaría asegurarme de que la validación no se omita en ningún caso, ya sea que esté escrita o pegada en el cuadro.


802
2018-03-28 18:53


origen


Respuestas:


Puedes usar .on() vincular una función a múltiples eventos:

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

O simplemente pase la función como el parámetro a las funciones de eventos normales:

var myFunction = function() {
   ...
}

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

1464
2018-03-28 18:56



A partir de jQuery 1.7, el .on() método es el método preferido para asociar controladores de eventos a un documento. Para versiones anteriores, el .bind() El método se usa para asociar un controlador de eventos directamente a los elementos.

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

49
2017-11-14 08:14



Estaba buscando una forma de obtener el tipo de evento cuando jQuery escucha varios eventos a la vez, y Google me puso aquí.

Entonces, para aquellos interesados, event.type es mi respuesta:

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

Más información en el jQuery doc.


36
2018-05-14 22:00



Puedes usar método de enlace para adjuntar función a varios eventos. Solo pase los nombres de los eventos y la función del manejador como en este código:

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

Otra opción es usar el soporte de encadenamiento de jquery api.


19
2018-03-28 18:55



Si adjunta el mismo controlador de eventos a varios eventos, a menudo se encuentra con el problema de que más de uno de ellos dispara a la vez (por ejemplo, el usuario presiona la pestaña después de editar, la combinación de teclas, el cambio y el desenfoque pueden dispararse).

Parece que lo que realmente quieres es algo como esto:

$('#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



Puede definir la función que le gustaría reutilizar de la siguiente manera:

var foo = function() {...}

Y más tarde puede configurar la cantidad de detectores de eventos que desee en su objeto para activar esa función usando on ('event') dejando un espacio intermedio como se muestra a continuación:

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

10
2018-04-08 17:51



Así es como lo hago.

        $("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



La respuesta de Tatu es cómo lo haría intuitivamente, pero he experimentado algunos problemas en Internet Explorer con esta forma de anidar / vincular los eventos, aunque se hace a través del .on() método.

No he podido identificar exactamente con qué versiones de jQuery es el problema. Pero a veces veo el problema en las siguientes versiones:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Mobile 1.3.0b1
  • Móvil 1.4.2
  • Móvil 1.2.0

Mi solución ha sido definir primero la función,

function myFunction() {
    ...
}

y luego manejar los eventos individualmente

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

Esta no es la solución más bonita, pero me sirve, y pensé que la pondría allí para ayudar a otros que podrían tropezar con este problema.


4
2018-04-07 08:57