Pourquoi l'événement jQuery change - t-il ne se déclenche-t-il pas lorsque je mets la valeur d'un select en utilisant val()?
la logique du gestionnaire d'événements change() n'est pas exécutée lorsque la valeur est définie par val() , mais elle s'exécute lorsque l'utilisateur sélectionne une valeur avec sa souris. Pourquoi est-ce?
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<script>
$(function() {
$(":input#single").change(function() {
/* Logic here does not execute when val() is used */
});
});
$("#single").val("Single2");
</script>
9 réponses
parce que l'événement change nécessite un événement navigateur réel initié par l'utilisateur au lieu du code javascript.
Faire ceci à la place:
$("#single").val("Single2").trigger('change');
ou
$("#single").val("Single2").change();
je crois que vous pouvez déclencher manuellement l'événement de changement avec trigger() :
$("#single").val("Single2").trigger('change');
bien que la raison pour laquelle il ne démarre pas automatiquement, Je n'en ai aucune idée.
autant que je puisse lire dans les API. L'événement n'est déclenché que lorsque l'utilisateur clique sur une option.
http://api.jquery.com/change /
pour certaines cases, cases à cocher, et les boutons radio, l'événement est déclenché immédiatement lorsque l'utilisateur effectue une sélection à la souris, mais pour le autres types d'éléments l'événement est différé jusqu'à ce que l'élément perd concentrer.
ajouter ce morceau de code après le val() semble fonctionner:
$(":input#single").trigger('change');
pour le rendre plus facile ajouter une fonction personnalisée et l'appeler quand vous voulez que changer la valeur aussi déclencher le changement
$.fn.valAndTrigger = function (element) {
return $(this).val(element).trigger('change');
}
et
$("#sample").valAndTirgger("NewValue");
ou vous pouvez outrepasser la fonction val pour toujours appeler le changement quand le val est appelé
(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
this.trigger("change");
return originalVal.call(this, value);
};
})(jQuery);
échantillon à http://jsfiddle.net/r60bfkub /
dans le cas où vous ne voulez pas mélanger avec l'événement de changement par défaut, vous pouvez fournir votre événement personnalisé
$('input.test').on('value_changed', function(e){
console.log('value changed to '+$(this).val());
});
pour déclencher l'événement sur la valeur définie, vous pouvez faire
$('input.test').val('I am a new value').trigger('value_changed');
j'ai couru dans le même problème tout en utilisant CMB2 avec Wordpress et je voulais accrocher dans l'événement de changement d'un metabox de téléchargement de fichier.
donc si vous n'êtes pas en mesure de modifier le code qui invoque le changement (dans ce cas le script CMB2), utilisez le code ci-dessous. Le déclencheur est invoqué après que la valeur est définie, sinon votre eventHandler de changement fonctionnera, mais la valeur sera la précédente, pas celle qui est définie.
voici le code i use:
(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
if (arguments.length >= 1) {
// setter invoked, do processing
return originalVal.call(this, value).trigger('change');
}
//getter invoked do processing
return originalVal.call(this);
};
})(jQuery);
$(":input#single").trigger('change');
ça a marché pour mon script. J'ai 3 combos & bind avec chainSelect event, j'ai besoin de passer 3 valeurs par url & par défaut sélectionner all drop down. J'ai utilisé ce
$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');
et le premier événement a fonctionné.
si vous venez d'ajouter l'option select à un formulaire et que vous souhaitez déclencher l'événement de changement, j'ai trouvé qu'un setTimeout est nécessaire sinon jQuery ne décroche pas la boîte select nouvellement ajoutée:
window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);