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

Question

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

javascriptjqueryjquery-select2jquery-select2-4

4

我有以下HTML代码：

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

我正在将#condition_value_1元素替换为以下的SELECT类型，并尝试将最近的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元素？请帮忙解决一下？

- ReynierPM

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GillesC · Accepted Answer

如果不使用DOMNodeInserted事件绑定，似乎对我有效。

可以合理地假设，在调用replaceWith()方法时，该元素已被添加到DOM中。

JS Fiddle已更新

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