当我使用val（）设置select的值时，为什么jquery change事件没有触发？

change()当通过设置值时，不会运行事件处理程序中的逻辑val()，但是当用户用鼠标选择一个值时，它确实会运行。为什么是这样？

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

因为该change事件需要由用户而不是通过javascript代码启动的实际浏览器事件。

改为这样做：

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

要么

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

我相信您可以通过以下方式手动触发更改事件trigger()：

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

尽管为什么它不会自动启动，但我不知道。

在val（）之后添加这段代码似乎可行：

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

据我所读的API。仅当用户单击选项时才触发该事件。

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

对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但是对于其他元素类型，该事件将推迟到该元素失去焦点之前。

为了使其更容易，添加一个自定义函数并在需要时随时调用它，更改值也会触发更改

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

和

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

或者您可以覆盖val函数以始终在调用val时调用更改

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

样本位于http://jsfiddle.net/r60bfkub/

如果您不想与默认更改事件混淆，可以提供自定义事件

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

触发设置值的事件，您可以

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

在将CMB2与Wordpress一起使用时，我遇到了相同的问题，并想了解文件上传元框的change事件。

因此，如果您无法修改调用更改的代码（在本例中为CMB2脚本），请使用下面的代码。设置值后将调用触发器，否则您的更改eventHandler将起作用，但该值将是前一个值，而不是被设置的值。

这是我使用的代码：

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

这适用于我的脚本。我有3个连击并与chainSelect事件绑定，我需要通过url传递3个值并默认选择全部下拉菜单。我用这个

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

第一次活动奏效了。

如果您刚刚将选择选项添加到表单中，并且希望触发更改事件，那么我发现需要setTimeout，否则jQuery不会选择新添加的选择框：

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