將代碼更改爲.on不會工作

Question

我嘗試使用「.on」事件更改代碼，因爲我使用稍後的generatet模式窗體。

多數民衆贊成的代碼我的變化

JS代碼

var next = 1; 
//originalcode: $(".add-more").click(function(e){ 
$(document).on('click','.add-more',function(e){ 
    e.preventDefault(); 
    var addto = "#field" + next; 
    var addRemove = "#field" + (next); 
    next = next + 1; 
    var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">'; 
    var newInput = $(newIn); 
    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); 

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

和HTML代碼

<div class="container"> 
<div class="row"> 
    <input type="hidden" name="count" value="1" /> 
    <div class="control-group" id="fields"> 
     <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
     <div class="controls" id="profs"> 
      <form class="input-append"> 
       <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div> 
      </form> 
     <br> 
     <small>Press + to add another form field :)</small> 
     </div> 
    </div> 
</div> 

（阿賈克斯後來generatet表單內）對我來說它只適用於Mainpage，而不適用於後來的generatet模式 - 我做錯了什麼？

Answer 1

問題是什麼？它工作正常。

var next = 1; 
 
//originalcode: $(".add-more").click(function(e){ 
 
$(document).on('click','.add-more',function(e){ 
 
    e.preventDefault(); 
 
    var addto = "#field" + next; 
 
    var addRemove = "#field" + (next); 
 
    next = next + 1; 
 
    var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">'; 
 
    var newInput = $(newIn); 
 
    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); 
 
}); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="row"> 
 
    <input type="hidden" name="count" value="1" /> 
 
    <div class="control-group" id="fields"> 
 
     <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
 
     <div class="controls" id="profs"> 
 
      <form class="input-append"> 
 
       <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div> 
 
      </form> 
 
     <br> 
 
     <small>Press + to add another form field :)</small> 
 
     </div> 
 
    </div> 
 
</div>