如何在使用 jquery 输入时向 html 文档添加新输入？答案

【问题标题】：How to add new input to html document on input typing using jquery?如何在使用 jquery 输入时向 html 文档添加新输入？
【发布时间】：2016-09-22 09:33:18
【问题描述】：

我想添加动态输入。

我已经创建了一个输入，如果有人向其中写入内容，它将在其下方添加新输入，如果再次有人向新创建的输入中写入内容，它将调用相同的 jquery 并在下面生成另一个输入，依此类推. （与谷歌的地址和电子邮件联系表相同）

我该怎么做。

我已经尝试过了，但是每次按键都会给我新的输入，而且对于新创建的输入它也不起作用

var counter = 2;
$("input[id^='textbox']").keypress(function () {
  if (counter>10){
    alert("Only 10 textboxes allow");
    return false;
  }

  var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

  newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
                             '<input type="text" name="textbox' + counter +
                             '" id="textbox' + counter + '" value="" >');
  newTextBoxDiv.appendTo("#TextBoxesGroup");
  counter++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label>
    <input type='textbox' id='textbox1' >
  </div>
</div>

【问题讨论】：

虽然您可能是 JavaScript 或 HTML 的新手，但您需要首先做出可信的尝试来实施您自己的解决方案，然后，如果您有问题，请回来展示您的“minimal reproducible example”代码并解释您遇到的问题。我们很乐意帮助您解决问题，但要求我们为您做这件事并不是我们的目的。如果您需要有关如何实现此功能的指导，那么这是题外话，因为我们不提供或推荐非现场资源，无论是教程、库还是插件。
你应该尝试一下，然后提出问题。

标签： javascript jquery html input

【解决方案1】：

您应该使用.on() 将事件处理程序附加到新输入。还要检查输入文本的父级是否为last-child，然后添加新行。

$(document).on("keyup change", "input[id^='textbox']", function(){
    if ($(this).parent().is(":last-child") && $(this).val() != ""){
        var index = $(this).parent().index() + 2;
        $("#TextBoxesGroup").append('<div id="TextBoxDiv'+index+'"><label>Textbox #'+index+' : </label><input type="textbox" id="textbox'+index+'" ></div>');
    }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label>
        <input type='textbox' id='textbox1' >
    </div>
</div>

【讨论】：

效果很好。但是一个小问题，如果我按 Tab 键转到生成的文本框，它会再次生成新的文本框。
@MahekShah 很好的提及。固定。