Jquery + '' + '' +userAlert.alert\u开始日期 + '' +userAlert.alert\u结束日期 + '' + '' + '' tbl.追加（tblRow）； initSelect2（）//调用函数初始化创建的所有Select2下拉列表 }); }, 错误：函数（err）{ log（'Error（RetrieveUserAlerts）：'+JSON.stringify（err，null，2））； } }); };

很抱歉留下无关的东西-我评论了感兴趣的领域。 希望这能帮助别人

这对我很管用

<div id="somediv">
    <select class="component">
    ...
    </select>
</div>



<script>
    $(document).on('click', '#addComponent', function () {

        $('#somediv').append(data); //data is my new select
        $('.component:last').select2();
    });
</script>

...
$（文档）。在（'click'，'#addComponent'，函数（）{
$（'#somediv'）.append（data）；//data是我的新选择
$（'.component:last'）。选择2（）；
});

我也遇到过同样的问题，但在绞尽脑汁数天之后，我找到了一个解决方案，但如果你期望有好的性能，那就不好了

因此，当第一次加载DOM时，无论加载什么选择项，都将具有select2功能，对于动态生成的字段，select2功能将不可用，因为已经加载了select2脚本

因此，要使select2正常工作，请在单击时动态重新加载脚本

function reload(id) {
    $(id).on("click", function () {
        $("head").append($("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css' type='text/css' media='screen' />"));
        $.getScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function () {
            $.getScript("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js", function () { 
                $('select').select2();
            })
        })
    })
}

函数重新加载（id）{
$（id）。在（“单击”上，函数（）{
$（“head”）。追加（$（“”）；
$.getScript（“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“，函数（）{
$.getScript（“https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js，函数（）{
$（'select'）。select2（）；
})
})
})
}

---

这样做的目的是，它将select2功能添加到$。

中，类似于上面的回答：

function initSelect2(element){
  element.select2({   });
}

// Dynamic add 
$('button[data-id="add-item"]').on('click', function(){
   // Add element
   obj.addItem();
   // Add Select2 to element
   initSelect2($('element'));
});

---

您可以看看这一点，这意味着jQuery在没有助手的情况下无法监视正在创建的项。或者创建

arrival.js

是为了在根本不使用jQuery的情况下使事情变得更简单吗？如果在将选择项添加到DOM后无法启动select2，则必须使用与第一条注释类似的DOM变异观察器谢谢，我现在采用这种方法-在将新的选择列表添加到DOM时显式启动select2。这意味着列表有两个初始化位置，但我已经将所有初始化代码移到了函数中，以将重复保持在最低限度。我认为我的第一个想法是新元素的初始化可以自动化，这有点乐观。正如juna-c的回答所示，这是可以做到的，但它确实依赖于一些更现代的浏览器中的功能，在这个应用程序中对最终用户（商店-所有客户都很重要）进行假设/强制执行是不合理的。谢谢，这很好。不过，我确实想尝试避免一些重复-select2下拉列表在两个不同的地方进行了初始化。我有一个匹配器，在下拉列表中有一个

.on（'change'，…）

触发器，所以这两个地方都需要初始化。我将研究如何在一个地方定义初始化。我将接受这一点作为答案，因为它确实可以解决最初提出的问题，尽管由于答案，我已经改变了我的整个方法。建议的软件包对此进行了包装，以使其更易于使用（即更抽象）。谢谢大家。@Jason只是想把事情弄清楚。不包装DomainNodeInserted api。在内部，它使用新的api。DOMNodeInserted api是并且应该避免使用。不起作用，我在谷歌Chrome上测试过。即使是演示也不起作用。在Google ChromeThanks@Roshan中对我有效。我使用了你的代码来获取select2。我被卡住了，问题是只有一个selct2正在工作，而另一个select没有得到select2

初始化select2

您是否已将select-to-select2类添加到select元素？@ankitsuthar我正在使用jQuery

clone（）

复制

select

元素，而select2只在第一个元素上工作，就像你说的。我发现您不必对要克隆的元素应用Select2，而只需对克隆的元素应用Select2。用Select2克隆一个

select

，会产生不可靠的结果。我在远程Select2.js和dropzone.js中使用了这个方法，只需准备好文档中的函数即可。谢谢我的朋友，这真的很漂亮。我曾考虑使用“MutationObserver”，但你的解决方案非常有效。

<div id="somediv">
    <select class="component">
    ...
    </select>
</div>



<script>
    $(document).on('click', '#addComponent', function () {

        $('#somediv').append(data); //data is my new select
        $('.component:last').select2();
    });
</script>

function reload(id) {
    $(id).on("click", function () {
        $("head").append($("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css' type='text/css' media='screen' />"));
        $.getScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function () {
            $.getScript("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js", function () { 
                $('select').select2();
            })
        })
    })
}

function initSelect2(element){
  element.select2({   });
}

// Dynamic add 
$('button[data-id="add-item"]').on('click', function(){
   // Add element
   obj.addItem();
   // Add Select2 to element
   initSelect2($('element'));
});