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


Answers

我相信你可以用trigger()手动触发change事件:

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

虽然它不会自动启动,但我不知道。

Question

当value val()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>



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

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



我在使用CMB2和Wordpress时遇到了同样的问题,并想要挂钩文件上传元框的更改事件。

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