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>

希望這有助於！