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

onchange jquery select

Question

La lógica en el controlador de eventos change() no se ejecuta cuando val() establece el valor, pero se ejecuta cuando el usuario selecciona un valor con su 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>

Answer 1

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

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

Answer 2

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

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

Aunque por qué no se dispara automáticamente, no tengo ni idea.

Answer 3

Debido a que el evento de change requiere un evento de navegador real iniciado por el usuario en lugar de a través de un código javascript.

Haga esto en su lugar:

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

o

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

Answer 4

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

Answer 5

Hasta donde puedo leer en API''s. El evento solo se activa cuando el usuario hace clic en una opción.

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

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

Answer 6

Me encontré con el mismo problema mientras utilizaba 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 activador se está invocando DESPUÉS de que se establezca el valor; de lo contrario, su cambio eventHandler funcionará, pero el valor será el anterior, no el que se está configurando.

Aquí está el código que utilizo:

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

Answer 7

Para que sea más fácil, agregue una función personalizada y llámela cuando quiera que cambiar el valor también provoque un 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 a 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/

Answer 8

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 un setTimeout de lo contrario, jQuery no recoge el cuadro de selección recién agregado:

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

Answer 9

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

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

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

Y el primer evento funcionó.