Wie man Datepicker an ein einzelnes dynamisch eingefügtes Eingabefeld anfügt?

Question

Ich weiß, dass diese Frage seit vielen Jahren gestellt wird, aber nachdem ich so viele Fragen dazu gelesen habe, bin ich immer noch in der Lage zu erreichen, was ich will.

Ich habe eine Tabelle mit einer Reihe von Eingabefeldern Diese Eingabefelder verwenden den jQuery UI Datepicker. Es gibt auch eine Schaltfläche zum Hinzufügen einer Tabellenzeile.

Wenn ich auf die Schaltfläche klicke, um eine Tabellenzeile hinzuzufügen, wird sie dem Modal korrekt hinzugefügt. Aber der Datepicker aller Eingaben feuert gleichzeitig (keine ähnliche ID wird verwendet).

Modal Code:

<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-Code:

$(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

ja, weil das Problem mit JQuery Sie nicht in der Lage kann das Ereignis dynamisches Element von Jquery zu befestigen. Um dieses Problem zu beheben, müssen Sie auf das vorherige verfügbare Element im DOM als Hauptauswahl verweisen, wie dies unter dem Code der Fall ist.

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

Jetzt wird der Datapicker an dieses Element angehängt.