Binding Datepicker und select2 Bootstrap modal

Question

Ich habe ein Bootstrap-modal, das Ajax verwendet, um den Inhalt aus einer DB-Abfrage aufzufüllen. Allerdings arbeiten mein Datepicker und select2 Plugin nicht innerhalb des Modales, obwohl sie auf der Seite funktionieren. Ich bin relativ neu bei Ajax, aber ich habe einige Stackover-Threads gefunden, die darauf hindeuten, dass ich den Datepicker und Select2 binden muss, aber ich habe kein Glück.

index.php: Hier ist die Ajax ...

$(document).ready(function() {  
    $('#newCall').on('show.bs.modal', function (e) { 
     var id = $(e.relatedTarget).data('id'); 
     $(".datepicker").datepicker(); 
    $.ajax({ 
     type : 'post', 
     url : '../includes/modals/call.php', 
     data : 'id='+ id, 
     success : function(data){ 
     $('.form-data').html(data); 
     } 
    }); 
    }); 
}); 

Ich habe die select2 und picker js Dateien vor der Ajax enthalten.

call.php:

<!-- NEW CALL MODAL --> 
<div id="newCall" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="form-data"></div> 
     </div> 
    </div> 
</div> 

Vielen Dank im Voraus!

Answer 1

Verschieben $ (". Datepicker"). Datepicker(); in Ajax Erfolg (siehe unten) behob das Problem für mich.

$(document).ready(function() {  
    $('#newCall').on('show.bs.modal', function (e) { 
     var id = $(e.relatedTarget).data('id'); 
    $.ajax({ 
     type : 'post', 
     url : '../includes/modals/call.php', 
     data : 'id='+ id, 
     success : function(data){ 
     $('.form-data').html(data); 
     $(".datepicker").datepicker(); 
     } 
    }); 
    }); 

});