Чому подія зміни jquery не запускається, коли я встановлюю значення вибору за допомогою val ()?

Логіка в 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>

Тому що для changeподії потрібна реальна подія браузера, ініційована користувачем, а не через код JavaScript.

Зробіть це замість цього:

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

або

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

Я вважаю, що ви можете вручну запустити подію зміни за допомогою trigger():

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

Хоча чому це не спрацьовує автоматично, я поняття не маю.

Додавання цього фрагмента коду після val (), здається, працює:

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

Наскільки я можу прочитати в API. Подія запускається лише тоді, коли користувач натискає опцію.

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

Для полів вибору, прапорців та радіо кнопок подія запускається негайно, коли користувач робить вибір за допомогою миші, але для інших типів події відкладається, поки елемент не втратить фокус.

Щоб полегшити додавання спеціальної функції та зателефонувати їй коли завгодно, що зміна значення також призведе до зміни

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

Якщо ви не хочете змішуватися з подією зміни за замовчуванням, ви можете надати свою власну подію

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

Я зіткнувся з тією ж проблемою під час використання CMB2 з Wordpress і хотів підключитись до події зміни метабокса завантаження файлів.

Тож у випадку, якщо ви не зможете змінити код, який викликає зміну (у цьому випадку сценарій CMB2), використовуйте код нижче. Тригер викликається ПІСЛЯ встановленого значення, в іншому випадку ваш подія зміниHandler буде працювати, але значення буде попереднім, а не встановленим.

Ось код, який я використовую:

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

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

Це працювало для мого сценарію. У мене є 3 комбо & пов'язувати з події chainSelect, мені потрібно передати 3 значення за URL-адресою та за замовчуванням вибрати всі випадаючі. Я цим користувався

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

І перша подія спрацювала.

Якщо ви просто додали опцію вибору у форму і хочете запустити подію зміни, я виявив, що setTimeout необхідний, інакше jQuery не підбирає щойно додане поле вибору:

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