javascript - Javascript 添加更多按钮运行时

Question

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

当有人单击Add More链接时，将动态添加 2 个文本框。

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

<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

你为什么要把它复杂化？正如您在代码中使用的那样，这是通过and方法jquery附加现有元素的简单方法。cloneappend

文档： $.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

更新：

检查这个小提琴

Answer 2

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