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

这是类似的东西你想什么呢？

$(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>

类型为电子邮件的文本框，然后离开，以创建新文本框。

Answer 2

这样的事情？我使用.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>

希望这有助于！