Question

我有一个HMTL页面，其中包含由Javascript创建的输入（文字），我必须创建一个函数，如果最后一个输入被填充，则会创建另一个输入。如果最后创建的输入被填充，请再次创建另一个。我该怎么办？

这是我到目前为止的代码：

function visualizzaModifica(array, div)
{
    div.html("");
    div.append("<br>");

    let i=1;

    array.forEach(function (e)
    {
        div.append
        (
            "<div class='input-group'>"+
            "<input type='text' id='inputModificaNome"+i+"' class='form-control' value='"+e.nominativo+"'>"+
            "<input type='text' id='inputModificaCellulare"+i+"' class='form-control' value='"+e.cellulare+"'>"+
            "</div>"
        );

        i++;
    });

    div.append("<br>");
    div.append("<button id='btnSalvaTeamLeaderProduzione' class='btn btn-secondary'>Salva</button>");
}

在forEach和按钮Salva之间，我必须插入一次又一次插入输入的函数，如果您发现错误或此函数中更好的东西告诉我。谢谢

Answer 1

要在填充了新创建的文本框的情况下创建另一个文本字段，则需要一个事件处理程序来实现。这意味着我们还需要将事件处理程序分配给新创建的文本字段。在下面演示。

$(document).ready(function() {
  createNext(0);
});


function createNext(index) {

  if ($('#input-' + index).length == 0) {
    // create the next text box if not exists
    var next = $('<input>', {
      id: 'input-' + index,
      type: 'text',
      placeholder: 'text ' + index,
      class: 'text-chain'
    });

    next.on('change', function() {
      createNext(index + 1)
    });
    next.appendTo($('body'));
  }
}

input {
  margin: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果最后一个输入已填充，则添加输入

1 个答案: