Есть код, который в реальном времени подсчитывает все заполненные поля в блоке. Но код не хочет работать с полями, которые появляются динамически. Изначально выведено 2 поля, при нажатии на второе поле автоматом появляется 3 поле, при вводе в 3 поле появляется 4 и так далее. Появившиеся поля уже кодом не учитываются, скрипт не хочет их считать. Подскажите, пожалуйста! Вот пример:
// Подсчет заполненых input ингредиенты
$(function() {
$('input[id*="ingred"]').on('input', function() {
var countNonEmptyIngrInput = $('input[id*="ingred"]').filter(function() {
return this.value.trim() != '';
}).length;
$('input#xf_kol').val(countNonEmptyIngrInput);
});
});
//Поля ингредиентов
function addIngredient(group, name, value, unit) {
name = name || '';
value = value || '';
unit = unit || '';
var id = ++ingredientsCount;
var groupId = group.data('id');
var rowCount = group.find('tr').length;
var inputHTML = '<tr class="ingredient_box"><td>' + (rowCount < 1 ? 'Название ингредиента <span style="color:red;">*' : '') + '</td><td><div class="form-box-cont">' +
'<div class="form-box-ingrid"><input type="text" placeholder="Название ингредиента" id="ingred' + id + '" name="ingred_group[' + groupId + '][ingredient][' + id + '][name]" value="' + name + '"></div>' +
'<div class="form-box-inp"><input type="text" placeholder="Кол-во" name="ingred_group[' + groupId + '][ingredient][' + id + '][value]" value="' + value + '">' +
'<input type="text" placeholder="Ед.Изм." id="unit' + id + '" name="ingred_group[' + groupId + '][ingredient][' + id + '][unit]" value="' + unit + '">' +
'</div></div></td>' +
(rowCount >= 2 ? '<td class="td-comment"><a href="javascript:void(0)" class="inp-close" title="Удалить список">x</a>' :
'<th class="td-comment td-comment-pad">') +
'</tr>';
group.find('.ingredient-cont').append(inputHTML);
}
function delIngredient() {
$(this).parents('tr').remove();
return false;
}
function addGroup(name) {
name = name || '';
groupsCount++;
var id = groupsCount;
var html = '<div class="group-wrap" data-id="{id}"><div class="border-header"><span>{title}</span></div> \
<div class="form-table ingredient-cont"><div class="ingredient-cont_item"><div class="title-Group">Для чего ингредиенты <span class="td-comment">Например: <a href="javascript:void(0)">Для соуса</a></span></div><input type="text" name="ingred_group[{id}][name]" value="{name}"> \
</div></div></div>';
if (groupsCount == 1) {
html = html.replace(/\{title\}/, 'Добавить ингредиент');
} else {
html = html.replace(/\{title\}/, 'Дополнительный список <a href="javascript:void(0)" class="close-block" title="Удалить список">x</a>');
}
html = html.replace(/\{id\}/g, id);
html = html.replace(/\{name\}/g, name);
return $(html).appendTo('.add-list-box');
}
function delGroup() {
$(this).parents('.group-wrap').remove();
return false;
}
$(document).ready(function() {
$('.add-list').click(function() {
var group = addGroup();
addIngredient(group);
addIngredient(group);
return false;
});
$('div.ingredients')
.on('click change', '.ingredient-cont .form-box-ingrid input', function() {
$(this).parents('.ingredient-cont').removeClass('has-error');
if ($(this).parents('tr').is(':last-child')) {
addIngredient($(this).parents('.group-wrap'));
}
return false;
})
.on('click', '.inp-close', delIngredient)
.on('click', '.close-block', delGroup);
});
var ingredientsCount = 0;
var groupsCount = 0;
if (typeof ingredientsList !== 'undefined' && ingredientsList.length) {
groupsCount = ingredientsList.length;
$.map(ingredientsList, function(data) {
var group = addGroup(data['name']);
$.map(data['ingredient'], function(ingredient) {
addIngredient(group, ingredient['name'], ingredient['value'], ingredient['unit']);
});
addIngredient(group);
});
} else {
// ингредиенты
if (!groupsCount) {
var group = addGroup();
addIngredient(group);
addIngredient(group);
}
}
/* - Блок добавить ингредиенты- */
.ingredient_box {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
}
.form-box.ingredients {
position: relative;
margin: 50px 0 20px;
padding-bottom: 5px;
border-radius: 0;
z-index: 1;
}
.form-box.ingredients::after {
z-index: -1;
transform: scaleX(1.082);
box-sizing: border-box;
}
@media only screen and (max-width:780px) {
.form-box.ingredients::after {
transform: scaleX(1.2);
}
}
.form-box.ingredients .add-list-box .form-box-cont {
display: flex;
align-items: center;
padding: 5px 0 10px;
}
.ingredient_box td:nth-child(2),
.form-box-ingrid {
flex-grow: 1;
}
.form-box-ingrid input {
width: 100%;
}
.form-box.ingredients .add-list-box .form-box-inp input {
max-width: 70px;
width: 100%;
margin-left: 10px;
}
.form-box.ingredients .add-list-box .ingredient-cont_item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px 0 20px;
}
.form-box.ingredients .add-list-box .form-table input {
flex-grow: 1;
}
.ingredient-cont_item .title-Group {
padding: 10px 30px 10px 0;
}
@media only screen and (max-width:480px) {
.form-box.ingredients .add-list-box .form-box-inp input {
width: 42%;
}
}
.title-Group {
padding-right: 30px;
line-height: 1.2;
font-size: 13px;
}
.form-box.ingredients .add-list-box .form-table .td-comment {
display: block;
font-size: 12px;
font-style: italic;
color: #878787;
}
.form-box.ingredients .border-header {
border-bottom: 1px dotted #c5c5c5;
text-align: center;
margin: 0 0 25px;
}
.form-box.ingredients .border-header span {
padding: 0 20px;
background: #f8f8f8;
display: inline-block;
bottom: -13px;
position: relative;
font-size: 17px;
}
.form-box.ingredients .add-list {
display: inline-block;
position: relative;
color: #2a82c5;
font-style: normal;
height: 23px;
line-height: 21px;
background-color: #fff;
padding: 5px 10px 2px 26px;
font-size: 14px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px #dadada;
-moz-box-shadow: 0 1px #dadada;
box-shadow: 0 1px 4px #dadada;
}
.form-box.ingredients .add-list:before {
position: absolute;
content: '+';
top: 5px;
left: 6px;
font-size: 22px;
color: #2a82c5;
}
.form-box.ingredients .add-list:hover {
text-decoration: none;
color: #d81760;
}
.form-box.ingredients .close-block {
font-style: normal;
font-size: 16px;
display: inline-block;
margin-left: 5px;
color: red;
}
.form-box.ingredients .inp-close {
position: absolute;
top: 15px;
right: -12px;
font-style: normal;
text-decoration: none;
font-size: 16px;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-box ingredients">
<div class="add-list-box"></div>
<div class="border-header">
<span><a href="" class="add-list">Добавить еще список</a></span>
</div>
</div>
СКОЛЬКО ЗАПОЛНЕНО
<input type="text" name="kol" id="xf_kol" value="">