為什麼使用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>



我在使用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);



在val()之後添加這段代碼似乎工作正常:

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



如果您不想與默認更改事件混淆,則可以提供您的自定義事件

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



Links