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

Question 1

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.

Question 2

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

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

docs aquí .

Espero que ayude. ¡salud!

Question 3

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.

Question 4

Hacer esto.

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

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

Question 5

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!' );
}

Question 6

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!");
});

Question 7

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.

Question 8

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

Answer 1

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

Answer 2

2

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

StuperUser

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Rahul Pawar

Answer 7

6

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

StefanBob

Answer 8

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.

Answer 9

¿Qué hace la segunda línea?

Varun

Answer 10

@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

Answer 11

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

Pathros

Answer 12

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

Joshua Burns

Answer 13

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

Answer 14

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

StuperUser

Answer 15

Podrías, no podrías. Gracias.

brenjt

Answer 16

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

keeganwatkins

Answer 17

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!' );
}

Answer 18

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!");
});

Answer 19

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.

Answer 20

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

Answer 21

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

Burndog

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

Respuestas: