Select2가 'append'에서 실행되지 않습니다.

Question

Select2 함수가 새 select 태그를 추가 할 때 열리지 않으며 콘솔에이 오류가 있습니다 (Uncaught TypeError : $ (...) .select2는 함수가 아닙니다).

<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

여기 당신은 내가 당신의 코드에서 문제가 2 jQuery이라고 생각 솔루션 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>

과 함께 할 것입니다.

Check the order of JavaScript & CSS files.

나는 ES6 표준 (템플릿 리터럴)이 당신을 도울 것입니다

희망을 사용했습니다.