javascriptを使用して動的に追加された行を削除できません

Question

動的に行を追加するには、以下のフォームを作成しました。 +ボタンは完全に正常に動作していますが、Xボタン（動的に追加）から行を削除しようとすると、行を削除できず、 "Uncaught TypeError"が返されます。これはjavascriptとjqueryを使用します。

スニペットを実行している間、スクロールして結果を確認してください。

$(document).ready(function(){ 
 
    var i=1; 
 
    $('#add').click(function(){ 
 
      i++; 
 
      $('#dynamic_field').append('<tr><td><input type="text" name="name[]" placeholder="Category" class="form-control name_list" /></td><td><input type="radio" name="inlineRadioOptions []" value="Yes &emsp;"> Yes &emsp; <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="No"> No</label></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); 
 
    }); 
 
    $(document).on('click', '.btn_remove', function(){ 
 
      var button_id = $(this).attr("id"); 
 
      $('#row'+button_id+'').remove(); 
 
    }); 
 
    $('#submit').click(function(){ 
 
      $.ajax({//here you can send date to DB 
 
       url:"name.php", 
 
       method:"POST", 
 
       data:$('#add_name').serialize(), 
 
       success:function(data) 
 
       { 
 
        alert(data); 
 
        $('#add_name')[0].reset(); 
 
       } 
 
      }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
 
<div class="card-body"> 
 
\t \t \t \t <h5 class="card-text"><div style="text-align: left">Deliverables</div></h5> 
 
     <h6 class="card-subtitle mb-2 text-muted"><div style="text-align: left">Press + to add minors</div></h6> 
 
     <button id="add" class="btn add-more"type="button">+</button> 
 
     </div> 
 
     
 
     
 
       <div class="container"> 
 
     <div class="row"> 
 
     <input type="hidden" name="count" value="1" /> 
 
     <div class="control-group" id="fields"> 
 
     <div class="controls" id="profs"> 
 
     <form id="main_delivery" class="input-append"> 
 
     <div id="field"> 
 
     <table class="table table-bordered" id="dynamic_field"> 
 
            <tr> 
 
             <td><input type="text" name="name[]" placeholder="Category" class="form-control name_list" /></td> 
 
             <td><input type="radio" name="inlineRadioOptions []" value="Yes &emsp;"> Yes &emsp; <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="No"> No</label></td> 
 
     </tr></table> 
 
     </div> 
 
     </form></div> 
 
     </div> 
 
     </div> 
 
     </div>

Answer 1

試してみてください。

$(document).ready(function(){ 
     var i=1; 
     $('#add').click(function(){ 
       i++; 
       $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Category" class="form-control name_list" /></td><td><input type="radio" name="inlineRadioOptions []" value="Yes &emsp;"> Yes &emsp; <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="No"> No</label></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); 
     }); 
     $(document).on('click', '.btn_remove', function(){ 
       var button_id = $(this).attr("id"); 
       $('#row'+button_id+'').remove(); 
     }); 

     $('#submit').click(function(){ 
       $.ajax({//here you can send date to DB 
        url:"name.php", 
        method:"POST", 
        data:$('#add_name').serialize(), 
        success:function(data) 
        { 
         alert(data); 
         $('#add_name')[0].reset(); 
        } 
       }); 
     }); 
    }); 

Answer 2

.on()ずっと後V1.4.1以上のjQueryに来ました。 > = v1.7に更新するか、.delegate()を使用してください。いずれにしても、あなたのバージョンを少なくともv1.4.2にバンプする必要があります。これは、.delegate()が導入されたバージョンです。次のコード