jQuery 'si .change () o .keyup ()'

82

Usando jQuery, me gustaría ejecutar una función cuando .change()o .keyup()se plantean.

Algo como esto.

if ( jQuery(':input').change() || jQuery(':input').keyup() )
{
    alert( 'something happened!' );
}

EDITAR

Lo siento, olvidé mencionarlo. Ambos .change()y .keyup()necesitan que algunas de las variables estén dentro del alcance.

javascript jquery function

— cnotethegr8
fuente

2

Los eventos no están "activos", se plantean.

— StuperUser

need some of the variables to be in-scope¿Te refieres a variables del evento o variables que estás usando cuando registras estos controladores de eventos? Obtiene las variables de evento en el parámetro de evento (generalmente llamado e), de lo contrario, es posible que deba mantenerlas en el nivel de la ventana o en los datos del elemento hasta que se generen los eventos o ver los cierres.

— StuperUser

189

puede enlazar a varios eventos separándolos con un espacio:

$(":input").on("keyup change", function(e) {
    // do stuff!
})

docs aquí .

Espero que ayude. ¡salud!

— Keeganwatkins
fuente

7

Tenga en cuenta que la función interna se llama dos veces si el valor cambia al presionar la tecla (por lo tanto, casi siempre). Vea la respuesta de @Joshua Burns para manejarlo.

— T30

pero se ejecuta 2 veces, una para "keyup" y otra para "change" ... ¿por qué?

— Rahul Pawar

6

Debería usar .on () en lugar de .bind ()

— StefanBob

23

Si alguna vez está generando contenido de página de manera dinámica o cargando contenido a través de AJAX, el siguiente ejemplo es realmente el camino que debe seguir:

Evita el doble enlace en el caso de que el script se cargue más de una vez, como en una solicitud AJAX.
El enlace vive en el bodydocumento, por lo que independientemente de los elementos que se agreguen, muevan, eliminen y vuelvan a agregar, todos los descendientes que bodycoincidan con el selector especificado conservarán el enlace adecuado.

El código:

// Define the element we wish to bind to.
var bind_to = ':input';

// Prevent double-binding.
$(document.body).off('change', bind_to);

// Bind the event to all body descendants matching the "bind_to" selector.
$(document.body).on('change keyup', bind_to, function(event) {
    alert('something happened!');
});

¡Note por favor! Estoy utilizando $.on()y en $.off()lugar de otros métodos por varias razones:

$.live()y $.die()están en desuso y se han omitido en versiones más recientes de jQuery.
Necesitaría definir una función separada (por lo tanto, saturar el alcance global) y pasar la función a ambos $.change()y por $.keyup()separado, o pasar la misma declaración de función a cada función llamada; Duplicando la lógica ... Lo cual es absolutamente inaceptable.
Si alguna vez se agregan elementos al DOM, $.bind()no se vincula dinámicamente a los elementos a medida que se crean. Por lo tanto, si se vincula :inputy luego agrega una entrada al DOM, ese método de vinculación no se adjunta a la nueva entrada. Luego, necesitaría desvincular explícitamente y luego volver a vincular todos los elementos en el DOM (de lo contrario, terminará duplicando los enlaces). Este proceso deberá repetirse cada vez que se agregue una entrada al DOM.

— Joshua Burns
fuente

¿Qué hace la segunda línea?

— Varun

@VarunDas, var bind_to = ':input';crea una variable llamada bind_toque es un selector para tomar todos los tipos de entrada, como input, textareay button.

— Joshua Burns

Si quiero elementos específicos: var bind_to = '#myInput';la llamada ajax se ejecuta dos veces de todos modos. ¿¿¿Por qué???

— Pathros

@Pathros Necesitaría ver un ejemplo, este hilo no es el lugar. Envíame un mensaje en LinkedIn o algo así

— Joshua Burns

3

Hacer esto.

$(function(){
    var myFunction = function()
    {
        alert("myFunction called");
    }

    jQuery(':input').change(myFunction).keyup(myFunction);
});

— Brenjt
fuente

change()y keyup()devuelva el juego envuelto, para que pueda encadenarlo.

— StuperUser

Podrías, no podrías. Gracias.

— brenjt

la cadena también elimina la segunda consulta a través del DOM.

— keeganwatkins

2

Puede suscribirse a los eventos de cambio y activación:

$(function() {
    $(':input').change(myFunction).keyup(myFunction);
});

donde myFunctionestá la función que le gustaría ejecutar:

function myFunction() {
    alert( 'something happened!' );
}

— Darin Dimitrov
fuente

1

No es así como funcionan los eventos. En su lugar, les da una función para llamar cuando sucedan.

$("input").change(function() {
    alert("Something happened!");
});

— Alex Turpin
fuente

0

Escribe una sola función y llámala para ambas.

function yourHandler(e){
    alert( 'something happened!' );        
}
jQuery(':input').change(yourHandler).keyup(yourHandler);

Las funciones de registro de eventos change () y keyup () devuelven el conjunto original, por lo que pueden encadenarse.

— StuperUser
fuente

0

entrada de evento keyup jquery

Para demostración

$(document).ready(function(){  
    $("#tutsmake").keydown(function(){  
        $("#tutsmake").css("background-color", "green");  
    });  
    $("#tutsmake").keyup(function(){  
        $("#tutsmake").css("background-color", "yellow");  
    });  
});

<!DOCTYPE html>  
<html>  
<title> jQuery keyup Event Example </title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Fill the Input Box: <input type="text" id="tutsmake">  
</body>  
</html>

Expandir fragmento

— Desarrollador
fuente

Aprecie el ejemplo singular a pesar de que el OP estaba buscando una solución combinada de activación y cambio ...

— Burndog