Select2 funktioniert nicht nach jquery laden

Question

Ich habe dieses Problem, das ich nicht beheben kann. Alles, was ich tue, funktioniert einfach nicht. Ich arbeite mit vielen Formen, also habe ich beschlossen, eine PHP-Datei für jedes Formular zu erstellen und dann das Formular mit Ajax laden.

Js-Datei:

$('#firstForm').on('submit', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url : "includes/firstform.inc.php", 
     type: "POST", 
     data: $(this).serialize(), 
     success: function (data) { 
     $('.content-container').load('forms/zipscreens-form.php'); 

     }, 
     error: function (jXHR, textStatus, errorThrown) { 

     } 
    }); 
}); 

HTML Container:

<div class="content-container"> 
// in this div the form will be stored. 
</div> 

Select Form:

<select class="js-example-basic-single" name="selectWidth"> 
    <?php 
    for ($row = 1; $row <= $lastRow; $row++) { 
    echo "<option value='AL'>"; echo $worksheet->getCell('A'.$row)->getValue(); echo "</option>'"; 
    } 
    ?> 
</select> 

Warum ist das nicht funktioniert?

Answer 1

Sie müssen select2() initialisieren. Sie können dies tun, nachdem der Ladeaufruf abgeschlossen wurde. Anstatt also:

$('.content-container').load('forms/zipscreens-form.php'); 

Verwenden ..

$(".content-container").load("forms/zipscreens-form.php", function() { 
    $(".js-example-basic-single").select2(); 
});