¿Por qué el evento jquery change no se activa cuando configuro el valor de una selección usando val ()?

La lógica en el change()controlador de eventos no se ejecuta cuando se establece el valor val(), pero se ejecuta cuando el usuario selecciona un valor con el mouse. ¿Por qué es esto?

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

Porque el changeevento requiere un evento de navegador real iniciado por el usuario en lugar de a través del código javascript.

Haz esto en su lugar:

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

o

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

Creo que puede activar manualmente el evento de cambio con trigger():

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

Aunque no sé por qué no se dispara automáticamente.

Agregar este fragmento de código después de val () parece funcionar:

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

Por lo que puedo leer en las API. El evento solo se activa cuando el usuario hace clic en una opción.

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

Para cuadros de selección, casillas de verificación y botones de opción, el evento se activa inmediatamente cuando el usuario realiza una selección con el mouse, pero para los otros tipos de elementos, el evento se difiere hasta que el elemento pierde el foco.

Para hacerlo más fácil, agregue una función personalizada y llámela cuando quiera que cambiar el valor también active el cambio

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

y

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

O puede anular la función val para llamar siempre al cambio cuando se llama al val

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

Muestra en http://jsfiddle.net/r60bfkub/

En caso de que no desee mezclarse con el evento de cambio predeterminado, puede proporcionar su evento personalizado

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

para activar el evento en el conjunto de valores, puede hacer

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

Me encontré con el mismo problema mientras usaba CMB2 con Wordpress y quería conectarme al evento de cambio de un metabox de carga de archivos.

Entonces, en caso de que no pueda modificar el código que invoca el cambio (en este caso, el script CMB2), use el código a continuación. El desencadenante se invoca DESPUÉS de que se establece el valor; de lo contrario, su event event de cambio funcionará, pero el valor será el anterior, no el establecido.

Aquí está el código que 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');

Esto funcionó para mi guión. Tengo 3 combos y enlaces con el evento chainSelect, necesito pasar 3 valores por url y por defecto seleccionar todo desplegable. Yo usé esto

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

Y el primer evento funcionó.

Si acaba de agregar la opción de selección a un formulario y desea activar el evento de cambio, he encontrado que se requiere setTimeout; de lo contrario, jQuery no selecciona el cuadro de selección recién agregado:

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