動的DOM要素をSelect2にするにはどうすればいいですか？

Question

私は、次のHTMLコードを持っている：私は従うようSELECTタイプで#condition_value_1要素を交換し、最近SelectセレクトにSELECTターンしようとしています

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

を：

$(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 
     }); 
    }); 
});