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

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

当前回答

我在使用cb2和Wordpress时遇到了同样的问题,并且想要钩入文件上传metabox的更改事件。

因此,如果您不能修改调用更改的代码(在本例中是cb2脚本),请使用下面的代码。 触发器将在值设置之后被调用,否则您的更改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);

其他回答

为了更简单,添加一个自定义函数,当你想要更改值时调用它,并触发更改:

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

and

$("#sample").valAndTrigger("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');

在val()之后添加这段代码似乎可以工作:

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

就我所能读到的API。该事件仅在用户单击某个选项时触发。

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

对于选择框、复选框和 单选按钮,事件被触发 当用户执行 用鼠标选择,但对于 事件的其他元素类型 延迟,直到元素丢失 的焦点。

我在使用cb2和Wordpress时遇到了同样的问题,并且想要钩入文件上传metabox的更改事件。

因此,如果您不能修改调用更改的代码(在本例中是cb2脚本),请使用下面的代码。 触发器将在值设置之后被调用,否则您的更改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);