无法在动态添加的元素上初始化select2：TypeError：select2不是函数

Question

我搜索了这个主题并找到了一些答案 Initialising select2 created dynamically和Attach javascript/jquery event on dynamically created elements。但是，由于某种原因，我的问题无法解决。

基本上，我想要做的是当用户在现有的select2框中选择结果时动态创建另一个select2框。我做的是这样的：

在第一个select2框中，我使用

.on("select2:select", function (e) {
    prepareDepartment(e.params.data.id);
});

调用一个函数。在此函数中，我使用$.ajax来获取必要的数据。然后在success选项中，我创建一些像这样的HTML

$(".institution-selection").append('<select id="institution" class="form-control search-institution" name="institution">' +
    '<option></option>' +
'</select>');

在此之后，我想在新添加的类search-institution上初始化select2：

$(".search-institution").select2();

然而，我收到了这个错误

  

TypeError：$（...）。select2不是函数
  $（＆＃34; .search-机构＆＃34）SELECT2（）;

我在这里找不到任何东西？

更新：我尝试在$.ajax success选项中初始化HTML中的现有元素，仍然是同样的错误。如果我在$.ajax方法之外初始化元素，则没有错误。