每当我单击addtextboxes按钮时,我都希望有两个文本框,我正在使用此代码生成单个文本框,并且效果很好。
<script type="text/javascript">
$(document).ready(function () {
var counter = 1;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
</script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>answer #1 : </label><input type='textbox' id='answer1' >
</div>
</div>
在这里,我想知道当我单击addbutton时如何有两个文本框?
任何帮助,将不胜感激。
最佳答案
通过利用click事件的内部原理并将其放入自己的函数中,您可以执行以下操作:
的HTML
<button id="addButton">Add</button>
<div id='TextBoxesGroup'></div>
的JavaScript
var counter = 1;
var labelArray = ["answer", "order"];
$("#addButton").click(function () {
for(var i = 0; i < labelArray.length; i++){
createNewInput(labelArray[i]);
}
counter++;
});
function createNewInput(label){
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>'+ label + " " + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '" value="" >' );
newTextBoxDiv.appendTo("#TextBoxesGroup");
}
EXAMPLE