jQuery .on ('değişiklik', işlev () {} dinamik olarak oluşturulan girdiler için tetiklemiyor

Sorun şu ki, dinamik olarak oluşturulmuş bazı girdi etiketleri kümelerine sahip olmam ve ayrıca bir girdi değeri her değiştirildiğinde tetikleyecek bir işleve sahip olmam.

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

Ancak, .on('change')dinamik olarak oluşturulan herhangi bir girdi için tetiklemez, yalnızca sayfa yüklendiğinde mevcut olan öğeler için. Maalesef bu, beni biraz .onzor durumda bırakıyor .live()ve .delegate()bunların tümü için sarmalayıcılar .bind(): /

Bu sorunu olan veya bir çözüm bilen başka biri var mı?

İşleve bir seçici sağlamalısınız on:

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

Bu durumda beklediğiniz gibi çalışacaktır. Ayrıca, belge yerine bir öğe belirtmek daha iyidir.

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

Bunu kullan

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

Herhangi bir yaklaşımı uygulayabilirsiniz:

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


$("#Input_Id").on('change', function(){    // 2nd (A)
    // do your code here
    // It will specifically called on change of your element
});

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

$("#id").change(function(){
    //does some stuff;
});

Sadece bazı olası karışıklıkları açıklığa kavuşturmak için. Bu yalnızca DOM yükünde bir öğe bulunduğunda çalışır:

$("#target").change(function(){
    //does some stuff;
});

Daha sonra bir öğe dinamik olarak yüklendiğinde şunları kullanabilirsiniz:

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});

$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}

Bir eleman kullanıcı girdisi aldığında meydana gelen 'input' olayını kullanabilirsiniz.

$(document).on('input', '#input_id', function() {
  // this will fire all possible change actions
});

w3'ten belgeler

kullanabilirsiniz:

$('body').ready(function(){
   $(document).on('change', '#elemID', function(){
      // do something
   });
});

Benimle çalışıyor.