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

Question

La lógica en el controlador de eventos change() no se está ejecutando cuando el valor está establecido en 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> 

Answer 1

Porque el evento change requiere un evento de navegador real iniciado por el usuario en lugar de mediante el código de javascript.

hacer esto en su lugar:

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

Answer 2

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

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

Aunque por lo que no se dispara de forma automática, no tengo ni idea.

Answer 3

Por lo que yo puedo leer en la 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 radio, el evento se dispara inmediatamente cuando el usuario realiza una selección con el ratón, pero para los demás tipos de elementos del evento es diferido hasta que el elemento pierde foco.

Answer 4

La adición de este pedazo de código después del val() parece funcionar:

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

Answer 5

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

Esto funcionó para mi guión. Tengo 3 combos & enlazar con evento chainSelect, necesito pasar 3 valores por url & por defecto seleccionar todo desplegable. Utilicé esto

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

Y el primer evento funcionó.

Answer 6

En caso de que no quiere mezclar con evento de cambio predeterminado que puede proporcionar a su evento personalizado

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

para desencadenar el evento el conjunto de valores, puede hacerlo

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

Answer 7

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

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

Answer 8

Para que sea más fácil añadir una función personalizada y lo llaman cuando cada vez que desea que el cambio de valor también desencadenar el cambio

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

y

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

o se puede reemplazar la función val para llamar siempre el cambio cuando la val se llama

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

muestra a http://jsfiddle.net/r60bfkub/

Answer 9

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

En caso de que no pueda modificar el código que invoca el cambio (en este caso, el script CMB2), use el siguiente código. El desencadenante se invoca DESPUÉS de que se establezca el valor; de lo contrario, su change 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);