Perché l'evento change jquery non si attiva quando imposto il valore di una selezione usando val ()?

La logica nel change()gestore eventi non viene eseguita quando il valore è impostato da val(), ma viene eseguita quando l'utente seleziona un valore con il mouse. Perchè è questo?

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

Perché l' changeevento richiede un evento browser effettivo avviato dall'utente anziché tramite codice javascript.

Fallo invece:

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

o

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

Credo che tu possa attivare manualmente l'evento di modifica con trigger():

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

Anche se il motivo per cui non si attiva automaticamente, non ne ho idea.

L'aggiunta di questo pezzo di codice dopo che val () sembra funzionare:

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

Per quanto posso leggere nelle API. L'evento viene generato solo quando l'utente fa clic su un'opzione.

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

Per le caselle selezionate, le caselle di controllo e i pulsanti di opzione, l'evento viene generato immediatamente quando l'utente effettua una selezione con il mouse, ma per gli altri tipi di elemento l'evento viene rinviato fino a quando l'elemento non si attiva.

Per rendere più semplice aggiungere una funzione personalizzata e chiamarla quando si desidera che anche la modifica del valore attivi la modifica

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

e

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

Oppure puoi sovrascrivere la funzione val per chiamare sempre la modifica quando viene chiamata val

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

Esempio su http://jsfiddle.net/r60bfkub/

Nel caso in cui non desideri confonderti con un evento di modifica predefinito, puoi fornire il tuo evento personalizzato

$('input.test').on('value_changed', function(e){
    console.log('value changed to '+$(this).val());
});

per attivare l'evento sul set di valori, puoi farlo

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

Ho riscontrato lo stesso problema durante l'utilizzo di CMB2 con Wordpress e volevo collegarmi all'evento di modifica di un metabox di caricamento di file.

Quindi, nel caso in cui non sia possibile modificare il codice che richiama la modifica (in questo caso lo script CMB2), utilizzare il codice seguente. Il trigger viene invocato DOPO che il valore è impostato, altrimenti il ​​tuo evento changeHandler funzionerà, ma il valore sarà quello precedente, non quello impostato.

Ecco il codice che uso:

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

Questo ha funzionato per la mia sceneggiatura. Ho 3 combo e bind con evento chainSelect, ho bisogno di passare 3 valori per url e di default selezionare tutto il menu a discesa. Ho usato questo

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

E il primo evento ha funzionato.

Se hai appena aggiunto l'opzione di selezione a un modulo e desideri attivare l'evento di modifica, ho scoperto che è richiesto un setTimeout altrimenti jQuery non seleziona la casella di selezione appena aggiunta:

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