val () tidak memicu perubahan () di jQuery

Saya mencoba memicu changeacara pada kotak teks ketika saya mengubah nilainya dengan tombol, tetapi tidak berhasil. Periksa biola ini .

Jika Anda mengetik sesuatu di kotak teks dan mengklik di tempat lain, changedipicu. Namun, jika Anda mengklik tombol, nilai kotak teks berubah, tetapi changetidak memicu. Mengapa?

onchange hanya menyala saat pengguna mengetik ke input dan kemudian input kehilangan fokus.

Anda dapat memanggil onchangeacara secara manual menggunakan setelah menetapkan nilainya:

$("#mytext").change(); // someObject.onchange(); in standard JS

Atau, Anda dapat memicu acara menggunakan:

$("#mytext").trigger("change");

Dari saran redsquare yang sangat bagus, ini bekerja dengan baik:

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

Anda dapat dengan mudah mengganti valfungsi untuk memicu perubahan dengan menggantinya dengan proksi ke valfungsi asli .

cukup tambahkan kode ini di suatu tempat di dokumen Anda (setelah memuat jQuery)

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

Contoh kerja: di sini

(Perhatikan bahwa ini akan selalu memicu changeketika val(new_val)dipanggil bahkan jika nilainya tidak benar-benar berubah.)

Jika Anda ingin memicu perubahan SAJA ketika nilainya benar-benar berubah, gunakan yang ini:

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

Contoh langsung untuk itu: http://jsfiddle.net/5fSmx/1/

Anda perlu mengaitkan metode seperti ini:

$('#input').val('test').change();

Tidak, Anda mungkin perlu memicunya secara manual setelah menetapkan nilai:

$('#mytext').change();

atau:

$('#mytext').trigger('change');

Sepertinya acara tidak menggelegak. Coba ini:

$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});

Saya harap ini membantu.

Saya mencoba hanya tua biasa $("#mytext").trigger('change')tanpa menyimpan nilai lama, dan .changeapi bahkan jika nilainya tidak berubah. Itu sebabnya saya menyimpan nilai sebelumnya dan dipanggil $("#mytext").trigger('change')hanya jika itu berubah.

Pada Februari 2019 .addEventListener()saat ini tidak berfungsi dengan jQuery .trigger()atau .change(), Anda dapat mengujinya di bawah ini menggunakan Chrome atau Firefox.

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

Anda harus menggunakan .dispatchEvent()gantinya.

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt">

Dari https://api.jquery.com/change/ :

The changeevent dikirim ke elemen ketika nilainya berubah. Acara ini terbatas pada <input>elemen, <textarea>kotak , dan <select>elemen. Untuk kotak pilih, kotak centang, dan tombol radio, acara tersebut dipecat segera ketika pengguna membuat pilihan dengan mouse, tetapi untuk jenis elemen lainnya acara ditunda sampai elemen kehilangan fokus.

Saya tahu ini adalah utas lama, tetapi bagi yang lain mencari, solusi di atas mungkin tidak sebagus yang berikut ini, daripada memeriksa changeacara, periksa inputacara.

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});