Pourquoi l'événement jquery change ne se déclenche-t-il pas lorsque je définit la valeur d'une sélection à l'aide de val ()?

La logique du change()gestionnaire d'événements 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>

Parce que l' changeévénement nécessite un événement de navigateur réel initié par l'utilisateur au lieu de via le code javascript.

Faites ceci à la place:

$("#single").val("Single2").trigger('change');

ou

$("#single").val("Single2").change();

Je pense que vous pouvez déclencher manuellement l'événement de modification avec trigger():

$("#single").val("Single2").trigger('change');

Bien que pourquoi il ne se déclenche pas automatiquement, je n'en ai aucune idée.

L'ajout de ce morceau de code après le val () semble fonctionner:

$(":input#single").trigger('change');

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 les cases de sélection, les cases à cocher et les boutons radio, l'événement est déclenché immédiatement lorsque l'utilisateur effectue une sélection avec la souris, mais pour les autres types d'élément, l'événement est différé jusqu'à ce que l'élément perd le focus.

Pour le rendre plus facile, ajoutez une fonction personnalisée et appelez-la quand vous le souhaitez, la modification de la valeur déclenche également le changement

$.fn.valAndTrigger = function (element) {
    return $(this).val(element).trigger('change');
}

et

$("#sample").valAndTirgger("NewValue");

Ou vous pouvez remplacer la fonction val pour toujours appeler la modification lorsque le val est appelé

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        this.trigger("change");
        return originalVal.call(this, value);
    };
})(jQuery);

Exemple sur http://jsfiddle.net/r60bfkub/

Si vous ne souhaitez pas confondre avec un événement de modification 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 le faire

$('input.test').val('I am a new value').trigger('value_changed');

J'ai rencontré le même problème lors de l'utilisation de CMB2 avec Wordpress et je voulais me connecter à l'événement de changement d'une métabox de téléchargement de fichier.

Donc, si vous n'êtes pas en mesure de modifier le code qui appelle la modification (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 changement eventHandler fonctionnera, mais la valeur sera la précédente, pas celle qui est définie.

Voici le code que j'utilise:

(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');

Cela a fonctionné pour mon script. J'ai 3 combos et je lie avec l'événement chainSelect, je dois passer 3 valeurs par URL et par défaut sélectionner tout déroulant. J'ai utilisé ça

$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');

Et le premier événement a fonctionné.

Si vous venez d'ajouter l'option de sélection à un formulaire et que vous souhaitez déclencher l'événement de modification, j'ai trouvé qu'un setTimeout est requis sinon jQuery ne récupère pas la boîte de sélection nouvellement ajoutée:

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);