Document.onChange HTML / JavaScript / JQuery pour l'élément masqué ne fonctionne pas - javascript, jquery, html, javascript-events

J'ai programmé une boîte de sélection pour un client qui vientpour le savoir, une fonction javascript tierce est réenregistrée dans un groupe de divs et de spans, puis un élément caché contenant la valeur sélectionnée dans le choix de l'élément div / span. Il y a une autre boîte de sélection que j'ai programmée juste en dessous de cette boîte de sélection, qui dépend de la valeur de la première boîte de sélection (l'utilisateur sélectionne un pays. Si le pays contient des régions telles que les États-Unis et le Canada, une boîte de sélection d'état s'affiche). . Dans tous les cas, j’ai pensé qu’il serait préférable d’ajouter un événement onChange à l’élément masqué nouvellement créé dans la première zone de sélection, puis d’écrire ma propre fonction javascript, qui afficherait / masquerait la deuxième zone de sélection en fonction de la valeur des éléments cachés lorsque il a changé à la suite de la sélection du pays (le code javascript tiers met déjà à jour la valeur de l'élément masqué avec la valeur du pays nouvellement sélectionné). J’ai essayé de le faire dans jQuery et juste une API javascript directe, mais rien ne semble fonctionner. Juste pour info, quand le tiers javascript réécrit ma zone de sélection en div / span "s et dans un champ de saisie masqué, le champ de saisie masqué ne avoir un attribut id, je fais donc référence à l'élément par son nom ("collecte_données [7] [0]"). Voici le code que j'ai essayé jusqu'ici ....

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input-country").change(function(e){
console.log("testA");
});
})
jQuery("input-country").change(function(e){
console.log("testB");
});
jQuery(document).ready(function(){
jQuery(document.forms["myForm"]["collected_data[7][0]"]).change(function(e){
console.log("testC");
});
})
jQuery(document.forms["myForm"]["collected_data[7][0]"]).change(function(e){
console.log("testD");
});
document.forms["myForm"]["collected_data[7][0]"].onchange = function(){
console.log("testE");
};
document.getElementById("input-country").onchange = function(){
console.log("testF");
}
jQuery(document.forms["myForm"]["collected_data[7][0]"]).live("change",function(){
console.log("testG " + jQuery(this).val())
});
jQuery("input-country").live("change",function(){
console.log("testH " + jQuery(this).val())
});
jQuery(document).ready(function(){
jQuery(document.forms["myForm"]["collected_data[7][0]"]).live("change",function(){
console.log("testI " + jQuery(this).val())
});
})
jQuery(document).ready(function(){
jQuery("input-country").live("change",function(){
console.log("testJ " + jQuery(this).val())
});
})
</script>

Réponses:

Vous n'aurez pas les événements "de changement" lorsque leCet élément est modifié de manière programmée par le code JavaScript de quelqu'un. Ceux-ci ne sont générés par le navigateur que lorsque l'action de l'utilisateur est en cours. Ce qui serait mieux serait que le code JavaScript tiers appelle explicitement ".change ()" (la méthode jQuery) sur la sélection masquée.

Il est clair qu'un élément caché ne sera jamais une cible pour l'interaction de l'utilisateur.

"input-country" n'est pas un sélecteur valide. En outre, l'événement de modification nécessite un gain de mise au point, une modification de valeur, une perte de mise au point (flou) - les entrées masquées ne comporteront pas une telle séquence d'événements. Vous devez donc déclencher manuellement une modification sur celles-ci lorsque vous modifiez leurs valeurs.