동적 DOM 요소를 Select2로 바꾸는 방법은 무엇입니까?

Question

나는 다음과 같은 HTML 코드가 있습니다

<input type="text" id="condition_value_1"> 
<span class="click_me">Click Me</span> 

나는 다음과 같은 SELECT 유형으로 #condition_value_1 요소를 교체하고 선택 2로 SELECT 최근을 설정하려고 :

$(function() { 
    $('.click_me').click(function(ev) { 
    var condition_value_1 = $('#condition_value_1'); 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
    condition_value_1.replaceWith(select_html); 

    $('body').on('DOMNodeInserted', '#condition_value_1', function() { 
     $(this).select2({ 
     placeholder: 'Start typing ...', 
     tags: true 
     }); 
    }); 
    }); 
}); 

을하지만이 작동하지 않습니다 요소가 일반 HTML Select 유형으로 유지되고 Select2로 변환되지 않기 때문입니다. 함께 놀 수있는 Fiddle입니다. 나는 jQuery 1.12.4와 Select 4.0.3을 사용하고있다.

어떻게 동적 요소를 Select2 요소로 변환합니까? 어떤 도움이 필요합니까?

Answer 1

DOMNodeInserted 이벤트 바인딩을 사용하지 않으면 나를 위해 작동하는 것 같습니다.

replaceWith() 메서드가 호출 될 때 요소가 DOM에 추가되었다고 가정하는 것이 적절합니다.

JS Fiddle updated

$(function() { 
    $('.click_me').click(function(ev) { 
    var condition_value_1 = $('#condition_value_1'); 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
    condition_value_1.replaceWith(select_html); 

    $('#condition_value_1').select2({ 
     placeholder: 'Start typing ...', 
     tags: true 
     }); 
    }); 
});