jquery modification ne fonctionne pas en cas de changement de valeur dynamique

Question

En jQuery comment puis-je suivre l'événement onchange si la valeur de textbox change dynamiquement à partir d'un autre événement. J'ai essayé mais ca marche pas:

$("#txtbox").change(function(){ 
    alert("change"); 
}); 

Answer 1

L'événement change ne se déclenche que lorsque l'élément desserre mise au point. Utilisez plutôt l'événement keyup.

Answer 2

keyup ne couvre pas tous les cas naturels :(

Deux cas où change et keyup ne fonctionnera pas:

• navigateur mécanismes sous forme de saisie semi-automatique
• pâte de souris effectué du presse-papiers du système.

Exemple: formulaire a une zone de texte destinée à y insérer une adresse e-mail ange, les événements keyup sont attachés à celui-ci.

Lorsque l'utilisateur commence à taper une adresse électronique, si par ex. La boîte de saisie semi-automatique Chrome ou Firefox apparaît et l'utilisateur clique sur l'une des options, la boîte est remplie avec la valeur, le focus reste dans la zone de texte (aucun changement d'événement) et aucune touche n'a été enfoncée (aucun événement keyup). J'ai essayé de joindre un clic sur la liste, mais cela provoque un comportement bizarre dans mon navigateur.

Semblable au collage - si la souris est utilisée pour coller (via le menu contextuel disponible avec le bouton droit de la souris)), aucun événement de touche ou de changement n'est déclenché.

Quelqu'un a une solution complète pour cela, c'est-à-dire comment gérer les changements réels de la valeur de l'entrée?

Answer 3

Je suis d'accord avec Jakub P.

J'ai essayé d'utiliser Jquery pour gérer un changement de type de fichier de fichier d'entrée (pour visualiser l'image téléchargée) mais il ne déclencherait pas ainsi que la plaine vieux javascript onchange événement.

je changé la façon dont je joint le gestionnaire d'événements dans le $(document).ready()

de:

$("#iconImage").bind("change", function(event) { 
    ChangeImage("iconImage", "iconImagePreview"); 
}); 

à:

var obj = document.getElementById("logoImage"); 
obj.onchange = function() { 
    ChangeImage("logoImage", "#logoImagePreview"); 
}; 

et je reçois le comportement que je l'espérais.

Answer 4

Je cherchais une solution comme celle-ci qui déclencherait sans que l'utilisateur ait besoin de quitter l'élément, mais qui fonctionnerait dans tous les cas, y compris ceux identifiés par Jakub dans son article. C'est à dire.

• saisie normale
• collage via la souris
• Autocomplete

Je idéalement voulais une solution jQuery que j'utilisais différents sélecteurs de jQuery etc et ne voulait pas les tracas de "déballer" mes objets jQuery pour accéder à l'élément DOM.

Je suis allé pour une solution en utilisant trois cas différents déclencheurs - voir les commentaires dans l'exemple de code ci-dessous pour pourquoi:

var valuechanged = function() { 
    // do something 
}; 
var inputtowatch = $('.selector'); 
inputtowatch.on('input', valuechanged); 
inputtowatch.on('keyup', valuechanged); // input event is buggy and doesn't catch delete/backspace in IE, but can't just use keyup alone as that doesn't catch paste and automcomplete 
inputtowatch.on('propertychange', valuechanged); // input event not supported in IE < 9 

Je m'y attendais en utilisant plusieurs événements comme celui-ci pourrait entraîner la fonction d'être tiré à plusieurs reprises . Dans mes tests dans Firebug, cela ne s'est pas produit. Cependant, j'étais dans la position chanceuse de ne pas savoir si la fonction fonctionnait "trop" fois et donc n'a pas testé cet aspect particulier plus loin (par exemple d'autres navigateurs).