如何将动态DOM元素变成Select2？

Question

我有以下 HTML 代码：

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

我正在用 SELECT 类型替换 #condition_value_1 元素，如下所示，并尝试将最近的 SELECT 变成 Select2:

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

如何将动态DOM元素变成Select2？

How to turn dynamic DOM element into Select2?

javascript

jquery

jquery-select2-4

select2