Pourquoi l'événement de changement de jquery ne se déclenche-t-il pas lorsque je définis la valeur d'un select à l'aide de val ()?


Answers

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

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

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

Question

La logique dans le 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>



Ajouter ce morceau de code après le val () semble fonctionner:

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



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 fichiers.

Donc, dans le cas où vous n'êtes pas en mesure de modifier le code qui invoque 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);



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 le faire

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