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-bet 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:

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

Коли елемент динамічно завантажується пізніше, ви можете використовувати:

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

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

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

Ви можете використовувати подію "введення", яка виникає, коли елемент отримує введення користувача.

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

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

Ви можете використовувати:

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

Це працює зі мною.