每当我单击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

09-20 13:38