Question

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>

Answer 1

因为change事件需要用户发起的实际浏览器事件，而不是通过javascript代码。

请改为：

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

或

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

Answer 2

我相信您可以使用trigger()手动触发更改事件：

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

虽然为什么它不会自动发射，但我不知道。

Answer 3

在val（）之后添加这段代码似乎有效：

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

Answer 4

据我所知，在API中。只有在用户单击选项时才会触发该事件。

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

对于选择框，复选框和单选按钮，事件被解雇当用户做出时立即用鼠标选择，但是用于事件的其他元素类型推迟到元素丢失对焦。

Answer 5

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

$.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/

的示例

Answer 6

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

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

Answer 7

我在使用带有Wordpress的CMB2时遇到了同样的问题，想要挂钩文件上传元数据的更改事件。

因此，如果您无法修改调用更改的代码（在本例中为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);

Answer 8

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

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

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

第一个事件有效。

Answer 9

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

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

当我使用val（）设置select的值时，为什么jquery更改事件不会触发？

9 个答案: