Dlaczego zdarzenie zmiany jquery nie jest wyzwalane, gdy ustawiam wartość select za pomocą val ()?

Logika w change()module obsługi zdarzeń nie jest uruchamiana, gdy wartość jest ustawiona przez val(), ale działa, gdy użytkownik wybiera wartość za pomocą myszy. Dlaczego to?

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

Ponieważ to changezdarzenie wymaga rzeczywistego zdarzenia przeglądarki zainicjowanego przez użytkownika zamiast kodu javascript.

Zrób to zamiast tego:

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

lub

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

Wierzę, że możesz ręcznie uruchomić zdarzenie zmiany za pomocą trigger():

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

Choć nie uruchamia się automatycznie, nie mam pojęcia.

Wydaje się, że dodanie tego fragmentu kodu po val () działa:

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

O ile mogę przeczytać w API. Zdarzenie jest uruchamiane tylko wtedy, gdy użytkownik kliknie opcję.

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

W przypadku pól wyboru, pól wyboru i przycisków opcji zdarzenie jest uruchamiane natychmiast, gdy użytkownik dokonuje wyboru za pomocą myszy, ale w przypadku innych typów elementów zdarzenie jest odraczane do momentu, gdy element straci fokus.

Aby ułatwić dodanie niestandardowej funkcji i wywoływanie jej, kiedy tylko chcesz, zmiana wartości powoduje również zmianę

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

i

$("#sample").valAndTirgger("NewValue");

Lub można zastąpić funkcję val, aby zawsze wywoływała zmianę, gdy wywoływana jest val

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        this.trigger("change");
        return originalVal.call(this, value);
    };
})(jQuery);

Próbka na http://jsfiddle.net/r60bfkub/

Jeśli nie chcesz mieszać się z domyślnym zdarzeniem zmiany, możesz podać niestandardowe zdarzenie

$('input.test').on('value_changed', function(e){
    console.log('value changed to '+$(this).val());
});

aby wywołać zdarzenie przy ustawionej wartości, możesz to zrobić

$('input.test').val('I am a new value').trigger('value_changed');

Napotkałem ten sam problem podczas korzystania z CMB2 z Wordpress i chciałem przyłączyć się do zdarzenia zmiany metaboksu przesyłania plików.

Jeśli więc nie możesz zmodyfikować kodu, który wywołuje zmianę (w tym przypadku skrypt CMB2), użyj poniższego kodu. Wyzwalacz jest wywoływany PO ustawieniu wartości, w przeciwnym razie zmiana zdarzenia eventHandler będzie działać, ale wartość będzie poprzednia, a nie ustawiona.

Oto kod, którego używam:

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

To zadziałało w moim skrypcie. Mam 3 kombinacje i powiązanie ze zdarzeniem chainSelect, muszę przekazać 3 wartości według adresu URL i domyślnie zaznacz wszystkie rozwijane. Użyłem tego

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

I pierwsze wydarzenie zadziałało.

Jeśli właśnie dodałeś opcję select do formularza i chcesz wywołać zdarzenie zmiany, znalazłem, że wymagany jest setTimeout, w przeciwnym razie jQuery nie odbierze nowo dodanego pola wyboru:

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