javascript - jQuery .on('change', function() {} dinamik olarak oluşturulmuş inputlar için tetiklenmiyor

Sorun şu ki, benim dinamik olarak oluşturulmuş bazı giriş etiketleri setlerim var ve ayrıca bir girdi değeri değiştiğinde tetiklenmesi amaçlanan bir fonksiyonum da var.

$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

Ancak .on('change') herhangi bir dinamik olarak oluşturulmuş girdi için tetiklenmiyor, sadece sayfa yüklendiğinde mevcut olan öğeler için çalışıyor. Ne yazık ki bu durum beni biraz sıkıntıya sokuyor çünkü .on, .live() ve .delegate()’in yerini alması amaçlanan bir yöntem ve bunların hepsi .bind() için sarmalayıcılar :/

Başka birisi bu sorunla karşılaştı mı ya da bir çözümünü biliyor mu?

Cevap #1

Şu on fonksiyonuna bir seçici sağlamalısınız:

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

O durumda, beklediğiniz gibi çalışacaktır. Ayrıca, document yerine bazı elementleri belirtmek daha iyidir.

Daha iyi anlamak için bu makaleyi okuyun: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Cevap #2

Birden fazla yaklaşımdan herhangi birini kullanabilirsiniz:

$("#Input_Id").change(function(){   // 1st way
    // do your code here
    // Use this when your element is already rendered
});


$("#Input_Id").on('change', function(){    // 2nd way
    // do your code here
    // This will specifically call onChange of your element
});

$("body").on('change', '#Input_Id', function(){    // 3rd way
    // do your code here
    // It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});

Cevap #3

Bunu kullan

$('body').on('change', '#id', function() {
  // Action goes here.
});

İlgili makaleler