JavaScript-如何使用输入字段动态创建多个 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. example@url.com"/>
                    <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 更快、更可靠地找到元素。我每次都使用clone() 重新创建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. example@url.com"/>
                    <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. example@url.com' /><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. example@url.com"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

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