如何将 jquery select2 绑定到新添加的选择？答案

【问题标题】：How can i bind jquery select2 to new added selects?如何将 jquery select2 绑定到新添加的选择？
【发布时间】：2013-04-17 17:40:00
【问题描述】：

我有一个 razor-mvc 网络和一个表单上的几个选择。我将此选择与 jquery 中的 select2 插件绑定，如下所示：

$('select.company_select, select.positions_select').select2();

我的表单是一个 ajax 表单（由 javascript 实现的 ajax，而不是由 Ajax.BeginForm 实现的）。问题是，当我提交表单时，我添加了另一个表单，其中包含第一个表单的提交值，但是该新表单上的选择不会应用 select2 插件。我知道这是正常的，因为新项目应该与 .on() 或 .live() 绑定，但我不知道该怎么做。

你能帮帮我吗？

【问题讨论】：

你不能使用插件代理，你必须在ajax回调函数中初始化你的select2元素
这适用于 select2 插件或几乎任何 jQuery 插件吗？上面@A.Wolff 的评论已经有 5 年历史了——它在 2018 年仍然适用吗？
@HPWD 一些插件处理委托，但大多数不处理。这是插件的开发者是否有责任通过设计来处理它。通常处理它的插件有一个 seletor 参数，可以在初始化期间传递。
@A.Wolff 谢谢你的明确回答。

标签： jquery jquery-select2

【解决方案1】：

使用ajaxcomplete

$( document ).ajaxComplete(function(){
  $(".select2").select2();
});

【讨论】：

不错的解决方案，但仅适用于通过 ajax 请求而来的选择框。但不适用于没有 ajax 的动态创建的选择框。

【解决方案2】：

您正在执行 ajax 调用，因此请确保您在页面上的任何新选择框的任何其他选择上重新初始化选择。

所以你的 ajax 调用看起来像

$.ajax({ 
     url: '.../', 
     data..., 
     type...,
     success: function(data) 
     {
         $('#newFormAddedID select').select2();
     }

应该做的伎俩.. 你也可以在 complete:function(... 如果表单被添加，不管 ajax 调用是否成功。

【讨论】：

这对我有用。如果可能的话，我宁愿把它委托出去，但上面的评论表明插件必须重新初始化，但也在 2013 年发布。希望如此！ :D