如何将动态DOM元素转换为Select2？

Question

我有以下的HTML代码：

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

我用SELECT型取代#condition_value_1元素作为跟随并试图把最近选择到选择二：

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