jquery добавление нескольких полей ввода не работает

Question

хочу добавить несколько полей ввода, когда я нажимаю кнопку, но он работает только с одним полем ввода. Пусть это поле ввода inline.with пробел между полем и кнопкой удаления.

add.js

$(document).ready(function(){ 
    var next = 1; 
    $(".add-more").click(function(e){ 
     e.preventDefault(); 
     var addto = "#field" + next; 
     var addRemove = "#field" + (next); 
     next = next + 1; 
     var newIn = '<input autcomplete="off" class="input form-control" id="field2' + next + '" name="field' + next + '" type="text">'; 
     var newIn1= '<select class="select" id="field1' + next +'" name="field">'; 
     var newInput = $(newIn+newIn1); 
     var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">'; 
     var removeButton = $(removeBtn); 
     $(addto).after(newInput); 
     $(addRemove).after(removeButton); 
     $("#field" + next).attr('data-source',$(addto).attr('data-source')); 
     $("#count").val(next); 

      $('.remove-me').click(function(e){ 
       e.preventDefault(); 
       var fieldNum = this.id.charAt(this.id.length-1); 
       var fieldID = "#field" + fieldNum; 
       $(this).remove(); 
       $(fieldID).remove(); 
      }); 
    }); 



}); 

form.html

<form class="form-inline input-append" role="form"> 
    <button id="b1" class="btn add-more" type="button">Add Tax Component</button> 
    <div type="hidden" name="count" value="1"> 
     <div class="controls" id="profs"> 
      <div id="field" class="form-group col-md-12"> 
       <select class="select col-md-4" id="field1" name="prof2" hidden> 
         <option>select Tax</option> 
       </select> 
       <input autocomplete="off" class="input col-md-8" id="field2" name="prof1" type="text" placeholder="Type something" hidden data-items="8"/> 
      </div> 
     </div> 
    </div> 
</form> 

Answer 1

Я взглянул на ваш код и сделал это из этого. Вместо того, чтобы создавать элемент каждый раз, когда вы добавляете его, я взял на себя смелость переписать код, чтобы он клонировал начальный элемент (шаблон) и добавил его в ваш документ.

Посмотрите на код фрагмента ниже. Это может быть то, о чем вы просили?

$(".template:first").hide(); //hide template 
 

 
/* Add new item based on hidden template */ 
 
$(".add-more").click(function() { 
 
    var newItem = $(".template:first").clone(); 
 
    newItem.find("select").attr("id", "field" + ($(".template").length + 2)); //rewrite id's to avoid duplicates 
 
    newItem.find("input").attr("id", "field" + ($(".template").length + 2)); //rewrite id's to avoid duplicates 
 
    newItem.show(); //show clone of template 
 
    $(".template:last").after(newItem); 
 
    bindRemove(); 
 
}); 
 

 
/* Bind remove function to last added button*/ 
 
function bindRemove() { 
 
    $(".remove:last").click(function(e) { 
 
    if ($(".remove").length > 1) 
 
     $(this).parents(".template").remove(); 
 
    }); 
 
} 
 

 
/* Execute bind-function at startup */ 
 
bindRemove();

.template { 
 
    border: 2px solid black; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-inline input-append" role="form"> 
 
    <button id="b1" class="btn add-more" type="button">Add Tax Component</button> 
 
    <div class="template"> 
 
    <div class="controls" id="profs"> 
 
     <div id="field" class="form-group col-md-12"> 
 
     <select class="select col-md-4" id="field1" name="prof2"> 
 
      <option>select Tax</option> 
 
     </select> 
 
     <br/> 
 
     <br/> 
 
     <input autocomplete="off" class="input col-md-8" id="field2" name="prof1" type="text" placeholder="Type something" data-items="8" /> 
 
     <button class="remove" type="button"> 
 
      X 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

Answer 2

Вы должны определить некоторые критерии, сколько входов вы хотите, в зависимости от других оперативных данных, например

var howManyInputs = 15; 
$('#target').click(function() { 
    for (var i = 0; i < howManyInputs; i++) { 
     // add your inputs 
    } 
    // add your remove button 
}); 

Answer 3

Вы добавляете к уже существующему идентификатору после первого события. потому что «# field2» не существует в вашем html.

взгляд на это, я редактировал:

add.js

$(document).ready(function(){ 
     var next =1; 
     $(".add-more").click(function(e){ 
      e.preventDefault(); 
      console.log(next); 
      var addto = "#field" + next; 
      var addRemove = "#field" + (next); 
      next = next + 1; 
      var newIn = '<input autcomplete="off" class="input form-control" id="field2' + next + '" name="field' + next + '" type="text">'; 
      var newIn1= '<select class="select" id="field' + next +'" name="field">'; 
      var newInput = $(newIn+newIn1); 
      var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">'; 
      // var removeButton = $(removeBtn); 
      $(addto).after(newInput); 
      $(addRemove).after(removeBtn); 
      $("#field" + next).attr('data-source',$(addto).attr('data-source')); 
      $("input[name=count]").val(next); 

     }); 


     $('body').on("click", ".remove-me", function(e){ 
      e.preventDefault(); 
      var fieldNum = this.id.charAt(this.id.length-1); 
      var fieldID = "#field2" + fieldNum; 
      var selectfieldID = "#field" + fieldNum; 
      console.log(fieldNum); 
      console.log(fieldID); 
      console.log(selectfieldID); 
      $(this).remove(); 
      $(fieldID).remove(); 
      $(selectfieldID).remove(); 
     }); 

    }); 

А также, то не определяет слушатель событий внутри слушателя событий, он будет создавать дубликаты, ваш 1 клик будет иметь несколько Мероприятия. Попробуйте использовать .on(), который я использовал для отредактированного кода.