web-dev-qa-db-fra.com

jQuery 'if .change () ou .keyup ()'

Avec jQuery, je voudrais exécuter une fonction lorsque .change() ou .keyup() est déclenché.

Quelque chose comme ça.

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

MODIFIER

Désolé j'ai oublié de mentionner. .change() et .keyup() ont besoin que certaines des variables soient dans la portée.

javascriptjqueryfunction
65
cnotethegr8

vous pouvez vous lier à plusieurs événements en les séparant par un espace:

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

docs ici .

j'espère que cela pourra aider. à votre santé!

151
keeganwatkins

Si vous générez de manière dynamique du contenu de page ou que vous chargez du contenu via AJAX, vous trouverez ci-dessous l'exemple suivant:

  1. Cela empêche la double liaison dans le cas où le script est chargé plusieurs fois, comme dans une demande AJAX.
  2. La liaison est conservée dans la body du document. Ainsi, quels que soient les éléments ajoutés, déplacés, supprimés et rajoutés, tous les descendants de body correspondant au sélecteur spécifié conservent la liaison appropriée.

Le code:

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

S'il vous plaît noter! J'utilise $.on() et $.off() plutôt que d'autres méthodes pour plusieurs raisons:

  1. $.live() et $.die() sont obsolètes et ont été omis des versions plus récentes de jQuery.
  2. J'aurais besoin de définir une fonction distincte (et donc d'encombrer la portée globale) et de transmettre la fonction séparément à $.change() et $.keyup(), ou de transmettre la même déclaration de fonction à chaque fonction appelée; Dupliquer la logique ... Ce qui est absolument inacceptable.
  3. Si des éléments sont jamais ajoutés au DOM, $.bind() ne se lie pas dynamiquement aux éléments au fur et à mesure de leur création. Par conséquent, si vous vous liez à :input et ajoutez ensuite une entrée au DOM, cette méthode de liaison n'est pas attachée à la nouvelle entrée. Vous devez ensuite explicitement dé-lier puis ré-lier tous les éléments du DOM (sinon, les liaisons seront dupliquées). Ce processus devra être répété chaque fois qu'une entrée est ajoutée au DOM.
18
Joshua Burns

Vous pouvez vous abonner aux événements de modification et de modification:

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

où myFunction est la fonction que vous souhaitez exécuter:

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

Fais ça.

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

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

Ce n'est pas comme ça que les événements fonctionnent. Au lieu de cela, vous leur donnez une fonction à appeler quand ils se produisent.

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

Ecrivez une seule fonction et appelez-la pour les deux.

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

Les fonctions d'enregistrement d'événement change () et keyup () renvoient le jeu d'origine afin qu'elles puissent être chaînées.

0
StuperUser

entrée de l'événement keyup jquery

Pour démonstration

$(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>
0
Devendra Dode