ダイナミックに挿入された1つの入力フィールドにdatepickerを追加するにはどうすればよいですか？

Question

私はこの質問が長年にわたって求められていることを知っていますが、これに関連する多くの質問を読んだ後、私はまだ私が望むものを達成することができます。

私は、入力フィールドの束を含むテーブルを持っています。これらの入力フィールドは、jQuery UIのdatepickerを使用しています。テーブル行を追加するボタンもあります。

ボタンをクリックしてテーブル行を追加すると、それが正しくモーダルに追加されます。しかし、すべての入力のdatepickerは同時に（同じIDが使用されていない）発射されます。

モーダルコード：

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <form class="form-horizontal" id="edit-form"> 
       <div class="form-group"> 
       <label for="date" class="col-sm-2 text-left">Date</label> 
        <div class="col-sm-10"> 
        <div class="table-responsive"> 
         <table class="table table-bordered" id="dynamic_field"> 
          <tr> 
          <td><input type="text" name="date" placeholder="Enter date" class="form-control usedatepicker"/></td> 
          <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> 
          </tr> 
         </table> 
        </div>      
        </div> 
       </div>     
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="submit" class="btn btn-primary">Save changes</button> 
      </div> 
      </form> 
     </div> 
</div> 

JSコード：

$(document).ready(function(){ 
     var i=1; 
     $('#add').click(function(){ 
      i++; 
      $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="data" placeholder="Enter date" class="form-control usedatepicker" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); 
      $(".usedatepicker").datepicker();  

     }); 
     $(document).on('click', '.btn_remove', function(){ 
      var button_id = $(this).attr("id"); 
      $('#row'+button_id+'').remove(); 
     }); 
}); 

Answer 1

はい、jQueryを使って問題はあなたがjQueryのから動的な要素にイベントをアタッチすることはできない可能性があるため。この問題を解決するには、DOMの前の利用可能な要素をメインセレクタとして参照する必要があります（下のコードのように）。

$('body').on('focus',".class_of_dynamic_element", function(){ 
$(this).datepicker();}); 

これで、データピッカーがその要素にアタッチされます。