Typeaheadは最初の行で動作しますが、生成されたjQuery行では動作しません

Question

「追加」ボタンをクリックしてもデータベースからデータを引き出すために別のjQueryの先読みをクリックしても新しい行を生成するjQueryがあります。最初の行でのみ動作しますが、生成したjQueryの新しい行の中では動作しません。私は1

enter image description here

行と先行入力

<script> 
$(document).ready(function(){ 
     var i=1; 
     $('#add').click(function(){ 
      i++; 
      $('#dynamic_field').append('<tr id="row'+i+'"> 

<td><input type="text" id="itemname'+i+'" name="itemname" placeholder="Item 
name" class="form-control border-input" /></td> 

<td id="ibalance'+i+'"><div class="col-md-5"><input type="number" min="0" 
name="ibalance" id="ibalance" class="form-control border-input" 
maxlength="40"/></div></td> 

<td id="quantityInHand'+i+'">0</td> 

<td id="remark'+i+'"><div class="col-md-12"><input type="text" 
name="remarks" id="remark" class="form-control border-input" 
maxlength="40"/></div></td> 

<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger 
btn-simple btn_remove"><i class="material-icons">delete</i></button></td> 
</tr>'); 
     }); 
     $(document).on('click', '.btn_remove', function(){ 
      var button_id = $(this).attr("id"); 
      $('#row'+button_id+'').remove(); 
     }); 

     $('#recipient').typeahead({ 
      source: function(query, result) 
      { 
      $.ajax({ 
      url:"fetch1.php", 
      method:"POST", 
      data:{query:query}, 
      dataType:"json", 
      success:function(data) 
      { 
      result($.map(data, function(item){ 
       return item; 
      })); 
      } 
      }) 
      } 
     }); 

    $('#recipient').change(function(){ 
     var FULL_NAME = $(this).val(); 
     $.ajax({ 
      url:"load_data.php", 
      method:"POST", 
      dataType: "json", 
      data:{FULL_NAME:FULL_NAME}, 
      success:function(data){ 
        $('#address').val(data["ADDRESS"]); 
        $('#contact').val(data["CONTACT"]); 
      } 
     }); 

    }); 


     $('#itemname1').typeahead({ 
      source: function(query, result) 
      { 
      $.ajax({ 
      url:"fetchItem.php", 
      method:"POST", 
      data:{query:query}, 
      dataType:"json", 
      success:function(data) 
      { 
      result($.map(data, function(item){ 
       return item; 
      })); 
      } 
      }) 
      } 
     }); 
}); 

Answer 1

あなたが適用しているが生成するために、これは私のコードがあるjQueryのコードは、行のように同じ先行入力機能を持って生成したいです'＃itemname1'セレクタのために最初の行にのみ先読みしてください。必要なのは、新しく作成された行にも追加することです。あなたは '先'イベントの後ろに先読みコードを追加することでそれを行うことができます。

$('#add').click(function(){ 
    i++; 
    $('#dynamic_field').append('<tr id="row'+i+'"> 

     <td><input type="text" id="itemname'+i+'" name="itemname" placeholder="Item 
    name" class="form-control border-input" /></td> 

    <td id="ibalance'+i+'"><div class="col-md-5"><input type="number" min="0" 
    name="ibalance" id="ibalance" class="form-control border-input" 
    maxlength="40"/></div></td> 

    <td id="quantityInHand'+i+'">0</td> 

    <td id="remark'+i+'"><div class="col-md-12"><input type="text" 
                 name="remarks" id="remark" class="form-control border-input" 
                 maxlength="40"/></div></td> 

    <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger 
    btn-simple btn_remove"><i class="material-icons">delete</i></button></td> 
    </tr>'); 

    $('#itemname' + i).typeahead({ 
     source: function(query, result) 
     { 
      $.ajax({ 
       url:"fetchItem.php", 
       method:"POST", 
       data:{query:query}, 
       dataType:"json", 
       success:function(data) 
       { 
        result($.map(data, function(item){ 
         return item; 
        })); 
       } 
      }) 
     } 
    }); 
});