Val () kullanarak bir seçimin değerini ayarladığımda jquery change olayı neden tetiklenmiyor?

change()Olay işleyicisindeki mantık , değer tarafından ayarlandığında val()çalıştırılmaz, ancak kullanıcı fareleriyle bir değer seçtiğinde çalışır. Bu neden?

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

Çünkü changeolay kullanıcı tarafından yerine JavaScript kodu aracılığıyla başlatılan bir gerçek tarayıcı olayı gereklidir.

Bunun yerine şunu yapın:

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

veya

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

Değişiklik olayını manuel olarak tetikleyebileceğinizi düşünüyorum trigger():

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

Neden otomatik olarak ateşlemese de, hiçbir fikrim yok.

Bu kod parçasını val () işlevinden sonra eklemek işe yarıyor gibi görünüyor:

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

Bildiğim kadarıyla API'lerde okuyabilirim. Etkinlik yalnızca kullanıcı bir seçeneği tıkladığında tetiklenir.

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

Seçim kutuları, onay kutuları ve radyo düğmeleri için, kullanıcı fare ile bir seçim yaptığında olay hemen tetiklenir, ancak diğer öğe türleri için öğe öğe odağı kaybedene kadar ertelenir.

Daha kolay hale getirmek için özel bir işlev ekleyin ve değeri değiştirmenin de değişikliği tetiklemesini istediğinizde çağırın

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

ve

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

Veya val çağrıldığında her zaman değişikliği çağırmak için val işlevini geçersiz kılabilirsiniz

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

Numune http://jsfiddle.net/r60bfkub/

Varsayılan değişiklik etkinliği ile karıştırmak istemiyorsanız özel etkinliğinizi sağlayabilirsiniz

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

değeri ayarlanan olayı tetiklemek için

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

Wordpress ile CMB2 kullanırken aynı sorunla karşılaştım ve bir dosya yükleme meta kutusunun change olayına kanca istedim.

Bu nedenle, değişikliği başlatan kodu (bu durumda CMB2 betiği) değiştiremiyorsanız, aşağıdaki kodu kullanın. Tetik, değer ayarlandıktan SONRA çağrılır, aksi takdirde change eventHandler'ınız çalışır, ancak değer ayarlanan değer değil, öncekidir.

İşte kullandığım kod:

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

Bu benim senaryom için çalıştı. 3 combos & chainSelect olayı ile bağladım, url ve varsayılan tüm açılır listeyi seçerek 3 değer geçmem gerekiyor. Bunu kullandım

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

Ve ilk olay işe yaradı.

Bir forma seçme seçeneğini yeni eklediyseniz ve change olayını tetiklemek istiyorsanız, bir setTimeout gerekli olduğunu fark ettim, aksi takdirde jQuery yeni eklenen seçme kutusunu almaz:

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