Mengapa jquery mengubah acara tidak memicu ketika saya menetapkan nilai pilih menggunakan val ()?

Logika dalam change()event handler tidak dijalankan ketika nilai ditetapkan oleh val(), tetapi dijalankan ketika pengguna memilih nilai dengan mouse mereka. Kenapa ini?

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

Karena changeacara tersebut membutuhkan acara browser aktual yang diprakarsai oleh pengguna alih-alih melalui kode javascript.

Lakukan ini sebagai gantinya:

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

atau

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

Saya yakin Anda dapat memicu acara perubahan secara manual dengan trigger():

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

Meskipun mengapa itu tidak menyala secara otomatis, saya tidak tahu.

Menambahkan potongan kode ini setelah val () tampaknya berfungsi:

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

Sejauh yang saya bisa baca di API. Acara ini hanya dipecat ketika pengguna mengklik opsi.

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

Untuk kotak pilih, kotak centang, dan tombol radio, acara tersebut dipecat segera ketika pengguna membuat pilihan dengan mouse, tetapi untuk jenis elemen lainnya acara ditangguhkan hingga elemen kehilangan fokus.

Untuk membuatnya lebih mudah, tambahkan fungsi kustom dan panggil kapan saja Anda inginkan bahwa mengubah nilai juga memicu perubahan

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

dan

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

Atau Anda dapat mengganti fungsi val untuk selalu memanggil perubahan saat val dipanggil

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

Contoh di http://jsfiddle.net/r60bfkub/

Jika Anda tidak ingin bergabung dengan acara perubahan standar, Anda dapat menyediakan acara khusus Anda

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

untuk memicu acara pada nilai yang ditetapkan, Anda bisa melakukannya

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

Saya mengalami masalah yang sama saat menggunakan CMB2 dengan Wordpress dan ingin menghubungkan ke acara perubahan dari file upload metabox.

Jadi jika Anda tidak dapat mengubah kode yang meminta perubahan (dalam hal ini skrip CMB2), gunakan kode di bawah ini. Pemicu sedang dipanggil SETELAH nilai ditetapkan, jika tidak, eventHandler perubahan Anda akan berfungsi, tetapi nilainya akan menjadi yang sebelumnya, bukan yang ditetapkan.

Berikut kode yang saya gunakan:

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

Ini berhasil untuk skrip saya. Saya punya 3 kombo & ikat dengan acara chainSelect, saya harus memberikan 3 nilai dengan url & default pilih semua drop down. Saya menggunakan ini

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

Dan acara pertama berhasil.

Jika Anda baru saja menambahkan opsi pilih ke formulir dan Anda ingin memicu acara perubahan, saya telah menemukan setTimeout diperlukan jika tidak, jQuery tidak mengambil kotak pilih yang baru ditambahkan:

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