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

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/上的示例