0

Есть код, который в реальном времени подсчитывает все заполненные поля в блоке. Но код не хочет работать с полями, которые появляются динамически. Изначально выведено 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="">

1 ответ 1

1

Попробуй вот так:

$('body').on('input', 'input[id*="ingred"]', ({currentTarget})=>{
    const value = $(currentTarget).val();
    console.log(value);
});
1
  • Спасибо за подсказку! Мой пример был тоже верным, нужно было обратиться к всему документу а не конкретно к блоку. Оставил свой вариант, прописав BODY. Вам спасибо еще раз! 14 апр 2020 в 6:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.