Обнаружение новых элементов DOM для использования в .each()

Question

У меня есть следующие поля ввода:

subGroupInputs = $("td[data-field_name='sub_group'] input"); 

Пользователь может добавлять новые входы динамически.

$(subGroupInputs).each(function(input) { 
    $(this).on("keyup", function(){ 
     console.log($(this).val()); 
    }); 
}); 

Мне нужно получить все значения, даже значения из динамически добавляются те, но я не могу получить subGroupInputs обновить.

Я попытался ниже, но это также не работает:

 function setVariables(){ 
      subGroupInputs = $("td[data-field_name='sub_group'] input"); 
     } 

     //Initial Variables on Page Load 
     setVariables(); 

     //Set Variables Again after new elements are added. 
     $('.my-button').on("click", function(){ 
      setVariables(); 
     }); 

Answer 1

Попробуйте делегировать попытку поставить id в $ ('table'), если у вас несколько таблиц.

$("table").on('keyup', "td[data-field_name='sub_group'] input", function(){ 
    console.log($(this).val()); 
}); 

Идея здесь таблица становится все хиты событий, которые на самом деле событие распространяется от 'td[data-field_name='sub_group'] input'

Answer 2

вы должны попробовать с delegate вместо на, если вы хотите связать с пока еще не добавлены объекты в JQuery