Как получить значение из input в генерируемом input

Question

Есть страница с полями текстового ввода, там корректно отрабатывают события обработки текстовых полей. Но когда поверх этой странички, генерирует еще один блок с формами полей ввода, то в новых input не работает отслеживание ввода текста. Гугл не находит решение вопроса.

            <div class="mdl-grid blockTextField" style=width: 100%>
                <div class="mdl-cell--6-col">
                    ` + element.label + `
                </div>
                <div class="mdl-cell--12-col">
                <div class="textFieldSome">
                    <textarea class="addTaskTextField">` + element.placeholder + `</textarea>
                </div>
                </div>
            </div>

$(':input').on('input', function() {
    console.log("1111");
    const item = $(this);
    const currentValue = item.val();
    if (currentValue != '') {
        item.next('img').attr('src', fetchIconCross);
    } else {
        item.next('img').attr('src', fetchIconMagnifying);
    }
});

Создаю массив полей ввода таким способом.

function generateTextFields() {
    $('.containerTextField').empty();
    mockTextFields.forEach((element, index) => $('.containerTextField').append(createTextField(element)));
};

Для инициализации вызываю метод который отображает окно с полями ввода.

function mainAddTask(mainWidth) {
    console.log('Start Add Task' + mainWidth);
    $('.conteinerMainTask').width(mainWidth);
    generateTextFields();
    $('.conteinerMainTask').css('display', 'block');
};

В swift например, например наблюдатели корректно работают, при создании сцены, в JS что то не пойму, представление создано, js подключен.

Answer 1

Это классический вопрос, всех тех кто знакомиться с JS. Вы своей выборкой $(':input').on('input', function() ... просите браузер привязаться к полям, но ожидаете, что он автоматом должен это выполнить и с теми, что динамически созданы уже ПОСЛЕ того, как скрипт отработал. у вас два пути либо отталкиваться от родительского элемента... Что-то по типу

$(document).on('input', ':input', function () {
    console.log("1111");
    const item = $(this);
    const currentValue = item.val();
    if (currentValue != '') {
        item.next('img').attr('src', fetchIconCross);
    } else {
        item.next('img').attr('src', fetchIconMagnifying);
    }
});

либо переделать на функцию, и потом ещё раз её вызвать после того как создадите новые html элементы документа.

БЛОГ НА HUSL

Как получить значение из input в генерируемом input

Ответы (1 шт):