JavaScript-如何使用inputs字段动态创建多个div

Question

我必须创建3个输入文本框，用于获取有关姓名和电子邮件地址的用户输入。我必须动态创建它，，即当用户单击电子邮件输入字段时，将创建所有三个元素的新行。这是具有3个输入的一行代码：

<div class='row' id="inputcontainer">
        <div class="form-group clearfix" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

如何动态创建？

我正在使用以下代码进行克隆，它会多次克隆它，而不是1

maxIndex = 0;
$('form').on('input','.email',function(){
    $(this).parent().find('.common-sprite').removeClass('disNone');
    var lastmail = $(this);                                                                                  if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) {
        var count = $('.row.inputcontainer').length;
        console.log(count);
        maxIndex++;
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
        clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
        clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
        $('.inputcontainer').append(clone);
    }

Answer 1

这样的东西？我使用.blur()来触发动态添加，这样，如果你在电子邮件输入中键入一些内容，然后点击它的外部，那么接下来的3行信息就会显示出来。我还添加了一些类来帮助jquery更快、更可靠地查找元素。我每次使用CCD_ 2来重现3条线的相同结构。

$(document).ready(function() {
    $('.email').on('blur', function() {
        if($(this).val().length > 0) {
            var count = $('.row').length;
            console.log(count);
            var clone = $('#template').clone(true).attr('id', '');
            clone.find('.firstName').attr('id', 'firstName' + count).val('');
            clone.find('.lastName').attr('id', 'lastName' + count).val('');
            clone.find('.email').attr('id', 'inputMail' + count).val('');
            $('body').append(clone);
        }         
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
    <div class="form-group clearfix" >
        <div class="col-md-2 col-md-offset-2">
            <div class="form-text-field first-name">
                <label>First name</label>
                <input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-text-field last-name">
                <label>Last name</label>
                <input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-text-field email">
                <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                </div>
            </div>
        </div>
    </div>
</div>

希望这能有所帮助！

Answer 2

这与您想要的类似吗？

$(document).on("blur",".add",function()
{   
    $("#inputcontainer").append("<br />");
    $("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
    $("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
    $("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='e.g. [e-mail]' /><br />");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
        <div class="form-group clearfix t" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

在电子邮件文本框中键入，然后离开以创建新的文本框。