jQuery múltiples eventos para activar la misma función
¿Hay una manera de tener keyup
, keypress
, blur
, y change
eventos llaman a la misma función en una línea o tengo que hacerlo por separado?
El problema que tengo es que necesito validar algunos datos con una búsqueda de bd y me gustaría asegurarme de que la validación no se pierda en ningún caso, ya sea que esté escrita o pegada en el cuadro.
10 answers
Puede usar .on()
para vincular una función a varios eventos:
$('#element').on('keyup keypress blur change', function(e) {
// e.type is the type of event fired
});
O simplemente pase la función como parámetro a las funciones de eventos normales:
var myFunction = function() {
...
}
$('#element')
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)
.change(myFunction)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-04 00:14:24
A partir de jQuery 1.7, el método .on()
es el método preferido para adjuntar controladores de eventos a un documento. Para versiones anteriores, el método .bind()
se utiliza para adjuntar un controlador de eventos directamente a los elementos.
$(document).on('mouseover mouseout',".brand", function () {
$(".star").toggleClass("hovered");
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-11 06:48:38
Estaba buscando una manera 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 doc de jQuery.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-14 22:00:49
Puede usar el método bind para adjuntar la función a varios eventos. Simplemente pase los nombres de los eventos y la función de controlador como en este código:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
Otra opción es usar el soporte de encadenamiento de la api de jquery.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-28 18:55:40
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 se dispare a la vez (por ejemplo, el usuario presiona tab después de editar; keydown, change y blur podrían 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.
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-28 19:33:37
Puede definir la función que desea reutilizar de la siguiente manera:
var foo = function() {...}
Y más adelante puede establecer la cantidad de oyentes de eventos que desee en su objeto para activar esa función usando on ('event') dejando un espacio entre ellos como se muestra a continuación:
$('#selector').on('keyup keypress blur change paste cut', foo);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-31 18:08:28
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);
},
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-09 12:46:30
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, a pesar de que se hace a través de la .on()
método.
No he sido capaz de identificar exactamente con qué versiones de jQuery este es el problema. Pero a veces veo el problema en las siguientes versiones:
- 2.0.2
- 1.10.1
- 1.6.4
- Móvil 1.3. 0b1
- Móvil 1.4.2
- Mobile 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 funciona para mí, y pensé que la pondría ahí para ayudar a otros que podrían tropezar con este problema
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-07 08:57:03
"¿Hay una manera de tener keyup
, keypress
, blur
, y change
los eventos llaman 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 varios eventos a este método. En su 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 vivo:
$('#target').on('keyup keypress blur change', function(e) {
console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-26 19:16:49
$("element").on("event1 event2 event..n", function() {
//execution
});
Este tutorial trata sobre el manejo de múltiples eventos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-22 08:47:46