jqueryを使用して入力の入力時に新しい入力をhtmlドキュメントに追加するには？

Question

動的な入力を追加したいと思います。

入力が既に作成されていて、誰かが何かを書いていると、その下に新しい入力が追加され、新しく作成された入力に何か書き込むと、同じjqueryが呼び出され、に。 （アドレスとメールのGoogleの連絡フォームと同じです）

どうすればいいですか？

私はこれを試してみましたが、それは各キー入力の新しい入力のために私を与えているとも、新しく作成された入力のためにそれはあなたがにイベントハンドラをアタッチする.on()を使用する必要があります

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

が動作していません新しい入力。また、入力テキストの親が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>