web-dev-qa-db-fra.com

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

La logique du gestionnaire d'événements change() n'est pas en cours d'exécution 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>
jqueryhtmlselectinput
365
Eric Belair

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

Faites ceci à la place:

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

ou

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

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

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

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

44
David Thomas

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

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

Autant que je puisse lire dans les API. L'événement est déclenché uniquement lorsque l'utilisateur clique sur une option.

http://api.jquery.com/change/

Pour les cases à cocher, les cases à cocher et les boutons radio, l'événement est déclenché immédiatement lorsque l'utilisateur effectue une sélection à l'aide de 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.

8
Marnix

Pour faciliter la tâche, ajoutez une fonction personnalisée et appelez-la chaque fois que vous souhaitez que 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 le changement lorsque 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/

6
Alireza Fattahi

Au cas où vous ne voudriez pas vous mêler à 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 valeur définie, vous pouvez faire

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

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

Ainsi, 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 appelé APRÈS que la valeur soit définie, sinon, votre événement change eventHandler fonctionnera, mais la valeur sera la précédente et non celle 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);
2
user2075039

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

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);
1
Dave Hilditch
$(":input#single").trigger('change');

Cela a fonctionné pour mon script. J'ai 3 combos et lier avec l'événement chainSelect, j'ai besoin de passer 3 valeurs par URL et par défaut tout sélectionner déroulant. J'ai utilisé ceci

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

Et le premier événement a fonctionné.

1
Prashant Patil