val (), jQuery'deki değişikliği () tetiklemez

changeBir düğme ile değerini değiştirdiğimde bir metin kutusundaki olayı tetiklemeye çalışıyorum , ancak çalışmıyor. Bu kemanı kontrol et .

Metin kutularına bir şey yazar ve başka bir yere tıklarsanız change, tetiklenir. Ancak, düğmeyi tıklatırsanız, metin kutusu değeri değiştirilir, ancak changetetiklenmez. Neden?

onchange yalnızca kullanıcı girişe yazdığında ve ardından giriş odağı kaybettiğinde tetiklenir.

onchangeDeğeri ayarladıktan sonra etkinliği manuel olarak çağırabilirsiniz :

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

Alternatif olarak, etkinliği aşağıdakileri kullanarak tetikleyebilirsiniz :

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

Redsquare'in mükemmel önerisinden, bu iyi çalışıyor:

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

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

valOrijinal valişleve bir proxy ile değiştirerek değişikliği tetikleme işlevini kolayca geçersiz kılabilirsiniz .

Bu kodu belgenizde bir yere ekleyin (jQuery yükledikten sonra)

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

Çalışan bir örnek: burada

(Not bu her zaman tetikleyecek o changezaman val(new_val)değeri aslında değişti olsa bile denir.)

SADECE değer gerçekten değiştiğinde değişikliği tetiklemek istiyorsanız, bunu kullanın:

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

Bunun için canlı örnek: http://jsfiddle.net/5fSmx/1/

Yöntemi böyle zincirlemeniz gerekir:

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

Hayır, değeri ayarladıktan sonra manuel olarak tetiklemeniz gerekebilir:

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

veya:

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

Olaylar köpürmüyor gibi görünüyor. Bunu dene:

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

Umarım bu yardımcı olur.

$("#mytext").trigger('change')Eski değeri kaydetmeden sadece düz bir eski denedim .changeve değer değişmedi bile yangınlar. Bu yüzden önceki değeri kaydettim ve $("#mytext").trigger('change')sadece değiştiğinde çağırdım .

Şubat 2019 itibarıyla .addEventListener() jQuery ile çalışmıyor .trigger()veya .change()Chrome veya Firefox kullanarak aşağıda test edebilirsiniz.

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

.dispatchEvent()bunun yerine kullanmak zorundasınız .

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

Gönderen https://api.jquery.com/change/ :

changeDeğeri değiştiğinde olay bir öğesi gönderilir. Bu olay <input>öğeler, <textarea>kutular ve <select>öğelerle sınırlıdır . 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.

Bunun eski bir iş parçacığı olduğunu biliyorum, ancak diğerleri için, yukarıdaki çözümler belki aşağıdaki gibi iyi değil, changeolayları kontrol etmek yerine olayları kontrol edin input.

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