如何添加新的輸入到HTML文檔輸入使用jQuery的輸入？

-4

我有一個輸入已經創建，如果有人寫了一些東西，它會在它下面添加新的輸入，如果再一次寫入一些東西到新創建的輸入，它會調用相同的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>

來源

2016-09-22 Mahek Shah

雖然你可能是新的JavaScript或HTML，你需要實現自己的解決方案，首先做一個可信的努力，然後，*如果*你有問題，回來展示你「* [MCVE] *」代碼並解釋你遇到的問題。我們會很高興地幫助你解決你的問題，但是要求我們爲你做這件事並不是我們在這裏做的。如果你需要關於如何實現這一點的指導，那麼這是無關緊要的，因爲我們不提供或推薦場外資源，無論是教程，庫還是插件。 –

你應該嘗試一些然後問問題。 – Mohammad

您應該使用.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>

來源

2016-09-22 09:58:04 Mohammad

它很好用。但一個小問題，如果我按Tab鍵去生成的文本框，它會再次生成新的文本框。 –

@MahekShah好提。固定。 – Mohammad

非常感謝..它現在完美的工作:) –

如何添加新的輸入到HTML文檔輸入使用jQuery的輸入？

回答

相關問題