Как сделать автоматический ввод строки appender в js?

Question

У меня HTML-страница со строкой ввода и кнопкой отправки. Я хочу автоматически сгенерировать новую строку под строкой, если мы изменим содержимое первой строки.

Перед поиском я просто создал вторую кнопку с именем «Добавить новую строку» (явную).

HTML part
print '<input type="button" id="addLineButton" value="Ajouter ligne"/>';
print '<input type="submit" id="valider" value="Rechercher"/>';



JS part
    $("#addLineButton").click(function(e){
        e.preventDefault();            
        var newLine = "";
        document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
        var nbLines = Number(document.getElementById("nbLines").textContent);

        newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"

        $("#zoneOF").append(newLine);

    });

$ ("# zoneOF") - это div, а nbLines - это метка, которая используется для подсчета количества строк, которые у нас уже есть.

Я ищу (но не определяю)потому что я не знаю, как это сформулировать четко) что я могу сделать, чтобы удалить мой addLineButton и автоматизировать добавление строки (конечно, с событием on change).

Я не удивлюсь, если вы этого не сделалипонял, что, не стесняйтесь просить меня переформулировать. Заранее спасибо.

Answer 1

Хорошо, я решил это, просто сделав мой код рекурсивным.

$(document).ready(function(){
            var newLine = "";
            document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
            var nbLines = Number(document.getElementById("nbLines").textContent);

            newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"

            $("#zoneOF").append(newLine);
                
            $('#line'+nbLines).on('change', function() {
                setNewLine();
            });



            function setNewLine() {
                var newLine = "";
                document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
                var nbLines = Number(document.getElementById("nbLines").textContent);

                newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"

                $("#zoneOF").append(newLine);
                $('#line'+nbLines).on('change', function() {
                    setNewLine();
                });
            }

Я создаю новую строку при создании документа и помещаю в него событие изменения. Функция on change вызывает функцию, которая создает новую строку, а сама функция вызывает ее, когда на новой строке запускается событие on change.