jQuery .on ('change', function () {} не запускается для динамически создаваемых входов

Проблема в том, что у меня есть несколько динамически создаваемых наборов входных тегов, и у меня также есть функция, которая должна запускать каждый раз, когда изменяется входное значение.

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

Однако .on('change')он не запускается для каких-либо динамически создаваемых входных данных, а только для элементов, которые присутствовали при загрузке страницы. К сожалению, это оставляет меня в некотором затруднении, так как .onпредназначено для замены, .live()и .delegate()все они являются обертками для .bind(): /

Кто-нибудь еще имел эту проблему или знает решение?

Вы должны предоставить селектор для onфункции:

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

В этом случае все будет работать так, как вы ожидали. Также лучше указать какой-то элемент вместо документа.

Прочитайте эту статью для лучшего понимания: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Использовать это

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

Вы можете применить любой один подход:

$("#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;
});

Просто чтобы прояснить потенциальную путаницу. Это работает, только когда элемент присутствует в DOM load:

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

Когда элемент загружается динамически позже, вы можете использовать:

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

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

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

Вы можете использовать событие input, которое происходит, когда элемент получает пользовательский ввод.

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

документация от w3

ты можешь использовать:

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

Это работает со мной.