¿Hay alguna manera de tener keyup , keyup keypress , blur y change eventos para llamar a la misma función en una línea o tengo que hacerlas 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.
Puede usar .on() para 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)
A partir de jQuery 1.7, el método .on() es el método preferido para adjuntar manejadores de eventos a un documento. Para versiones anteriores, el método .bind() se usa para asociar un controlador de eventos directamente a los elementos.
$(document).on('mouseover mouseout',".brand", function () { $(".star").toggleClass("hovered"); })
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 documento de jQuery .
Puede usar el método bind 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.
Si adjunta el mismo controlador de eventos a varios eventos, a menudo se encuentra con el problema de más de uno de ellos disparando a la vez (por ejemplo, el usuario presiona la pestaña después de la edición, el teclado, 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. });
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);
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); }, });
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 realiza a través del método .on() .
No he podido identificar exactamente con qué versiones de jQuery es el problema. Pero a veces veo el problema en las siguientes versiones:
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.
“¿Hay alguna manera de tener keyup , keypress , blur y eventos de change llamar a la misma función en una línea?”
Es posible usar .on() , que acepta la siguiente estructura: .on( events [, selector ] [, data ], handler ) , por lo que puede pasar múltiples eventos a este método. En tu caso, debería verse así:
$('#target').on('keyup keypress blur change', function(e) { // "e" is an event, you can detect the type of event using "e.type" });
Y aquí está el ejemplo en vivo:
$('#target').on('keyup keypress blur change', function(e) { console.log(`"${e.type.toUpperCase()}" event happened`) });
$("element").on("event1 event2 event..n", function() { //execution });
Este tutorial trata sobre el manejo de eventos múltiples.