처음으로 동적으로 추가 할 때 Select2가 표시되지 않습니다.

Question

Jquery로 작업 중이며 버튼 클릭시 일부 요소를 동적으로 추가하는 유스 케이스가 있습니다.

'선택'을 동적으로 추가하는 동안 추가 버튼을 처음 클릭 할 때 select2가 표시되지 않고 간단한 '선택'이 표시되고 추가 버튼을 다시 클릭하면 이전의 모든 'select'는 select2로 형식화됩니다.

내가 추가 버튼을 클릭 할 때 생성 된 첫 번째 선택에는 select2도 있어야합니다.

다음은 스크립트입니다

var container = $(document.createElement('div')).css({ 
     padding: '5px', margin: '20px', width: '400px', border: '1px solid', 
     borderTopColor: '#999', float: 'left', borderBottomColor: '#999', 
     borderLeftColor: '#999', borderRightColor: '#999' 
    }); 

var iCnt = 0; 
function add() 
{ 
     if (iCnt <= 19) { 

      iCnt = iCnt + 1; 

    $(container).append($("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>")); 

    //Add Property Selector 

    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");  
    $(container).append($("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>")); 

    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");  
      // ADD TEXTBOX. 
    $('select').select2({width : '20%'}); 
      $(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' + 
         'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>'); 


      // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED. 
      if (iCnt == 1) { 

       var divSubmit = $(document.createElement('div')); 
       $(divSubmit).append('<input type=button class="bt"' + 
        'onclick="GetTextValue()"' + 
         'id=btSubmit value=Submit />'); 

      } 

      // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER. 
      $('#main').after(container, divSubmit); 
     } 
     // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. 
     // (20 IS THE LIMIT WE HAVE SET) 
     else { 
      $(container).append('<label>Reached the limit</label>'); 
      $('#btAdd').attr('class', 'bt-disable'); 
      $('#btAdd').attr('disabled', 'disabled'); 
     } 
    } 

다음 JS 바이올린에 대한 링크입니다 :

https://jsfiddle.net/hns0qk2b/43/

은 알려 주시기 바랍니다.

Answer 1

유일한 문제는 select2를 초기화하기 전에 새 요소를 DOM에 추가해야한다는 것입니다. 먼저 요소를 DOM에 추가하면 코드가 작동합니다.

// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER. 
$('#main').after(container, divSubmit); 

// Initialize select2 
$('select').select2({width : '20%'}); 

는 바이올린에 적용되는 변경 사항을 참조하십시오 : https://jsfiddle.net/zjafvr3u/1/