Select2 ne fonctionne pas sur 'append'

Question

La fonction Select2 ne s'ouvre pas lors de l'ajout d'une nouvelle balise select, et la console a cette erreur (Uncaught TypeError: $ (...). Select2 n'est pas une fonction).

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js'></script> 

$(document).on('click', '#addNewItem', function() { 
     var a = $(".gh").val(); 
     a++; 
     $('.asd').append('<select class="form-control select2" name="ProposalItemName[]">' + 
     '<optgroup label="Items">' + 
     '<option>test</option>' + 
     '<option>test</option>' + 
     '</optgroup>' + 
     '</select>'); 
     $('.select2').select2(); 
    }); 

Answer 1

Ici, vous allez avec une solution https://jsfiddle.net/cx5m40wu/2/

$(document).on('click', '#addNewItem', function() { 
 
    var a = $(".gh").val(); 
 
    a++; 
 
    $('.asd').append(`<select class="form-control select2" name="ProposalItemName[]"> 
 
    <optgroup label="Items"> 
 
     <option>test</option> 
 
     <option>test</option> 
 
    </optgroup> 
 
    </select>`); 
 
    $('.select2').select2();  
 
}); 
 
    

.alignRight{ 
 
    float: right; 
 
    padding-left: 15px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 
<div class="asd"> 
 
    test 
 
</div> 
 
<button id="addNewItem" type="button"> 
 
Click 
 
</button>

Je crois que la question dans votre code est 2 jQuery.

Check the order of JavaScript & CSS files.

Je l'ai utilisé ES6 standards

(littéraux modèle) Hope cela vous aidera.