Question

我正在尝试使用Javascript添加动态文本框。

如果有人点击Add More链接，则会动态添加2个文本框。

我有HTML代码，当有人点击Add More链接时，我想重复该代码。

<div class="row">
    <div class="left">Employer</div>
    <div class="right"><input type="text" class="tripObject" name="employer" id="employer" value=""> &nbsp; <strong>Position</strong> &nbsp; <input type="text" class="tripObject" name="position" id="position" value=""> &nbsp; <a href="javascript:addFormField();">Add More</a>
    </div>  
</div>

JavaScript代码是：

window.optionId =1;

window.addFormField = function() {
    optionId += 1;
    var thisOption = $('<div>', {
        'class': 'row ' + optionId
    }).append(
        $('<div>').attr({
            'class': 'left'
        }).html('Employer'), 
        /*$('<div>').attr({
            'class': 'right'}),*/
        $('<input>').attr({
            'type': 'text',
            'size': 20,
            'name': 'option_' + optionId,
            'class': 'tripObject',
            'validate': 'required:true'
        }), 
        $('<a>').attr({
            'href': '#'
        }).html('Remove').click(function() {
            thisOption.remove();
        })
    ).appendTo('#editeducationInfo');
};

Answer 1

你为什么要把它复杂化？当您在代码中使用jquery时，可以通过clone和append方法轻松添加现有元素。

文档： $.append()，$.clone()

var obj =  $("div.right").eq(0).clone(); //this will clone the html elements
$("div.row").append(obj); //this will append to the existing elements

<强>更新

选中此fiddle

Answer 2

DON的回答是正确的。但与此同时，您还需要更改ID和NAME属性。否则，如果所有元素都具有相同的名称，则从表单提交中检索数据会产生问题。

Javascript添加更多按钮运行时

2 个答案: