如何添加新的输入到HTML文档输入使用jQuery的输入？

Question

我想添加动态输入。

我有一个输入已经创建，如果有人写了一些东西，它会在它下面添加新的输入，如果再一次写入一些东西到新创建的输入，它会调用相同的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> 
 

Answer 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>