Por que o evento jquery change não é acionado quando eu defino o valor de um select usando val ()?

A lógica no change()manipulador de eventos não está sendo executada quando o valor é definido por val(), mas é executada quando o usuário seleciona um valor com o mouse. Por que é isso?

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

Como o changeevento requer um evento real do navegador iniciado pelo usuário em vez de via código javascript.

Faça isso:

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

ou

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

Acredito que você pode disparar manualmente o evento de alteração com trigger():

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

Embora por que ele não dispara automaticamente, não faço ideia.

Adicionar este pedaço de código após o val () parece funcionar:

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

Tanto quanto eu posso ler nas APIs. O evento é acionado apenas quando o usuário clica em uma opção.

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

Para caixas de seleção, caixas de seleção e botões de opção, o evento é acionado imediatamente quando o usuário faz uma seleção com o mouse, mas para os outros tipos de elemento, o evento é adiado até que o elemento perca o foco.

Para facilitar, adicione uma função personalizada e chame-a sempre que desejar que a alteração do valor também acione a alteração

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

e

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

Ou você pode substituir a função val para sempre chamar a alteração quando o val for chamado

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

Exemplo em http://jsfiddle.net/r60bfkub/

Caso não queira se misturar com o evento de alteração padrão, você pode fornecer seu evento personalizado

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

para acionar o evento no conjunto de valores, você pode fazer

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

Corri para o mesmo problema enquanto usava o CMB2 com o Wordpress e queria me conectar ao evento de mudança de uma metabox de upload de arquivo.

Portanto, caso você não consiga modificar o código que chama a alteração (nesse caso, o script CMB2), use o código abaixo. O gatilho está sendo chamado APÓS o valor ser definido, caso contrário, seu eventHandler de alteração funcionará, mas o valor será o anterior, e não o que está sendo definido.

Aqui está o código que eu 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');

Isso funcionou para o meu script. Eu tenho 3 combos e vincular com o evento chainSelect, eu preciso passar 3 valores por url e padrão selecionar todos drop-down. Eu usei isso

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

E o primeiro evento funcionou.

Se você acabou de adicionar a opção de seleção a um formulário e deseja acionar o evento de alteração, descobri que um setTimeout é necessário, caso contrário o jQuery não seleciona a caixa de seleção recém-adicionada:

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