如何在动态创建的 select 列表上执行 select2() 函数？

Question

我只是在单击按钮时动态创建一个 select 列表并将其附加到 div。它工作没有问题，但是当我希望这个 select 列表表现得像 select2 预期的那样可搜索时，它不起作用。

在下面，我将我的 select 列表传递给一个方法，该方法带有一个名为 GGroupDropDownListForJavascript 的 html 助手，html 结果如下所示。

 <select class="form-control input-xxlarge select2me" id="TagCategoryId" name="TagCategoryId">
 <option value="cf1d7da6-f49f-47aa-ba6d-a58f017c59ec">Element1</option>
 <option value="cf1d7da6-f49f-47aa-ba6d-a58f017c59ec">Element2</option>
 </select>

这是我的 Js 代码。

    $('#post').click(function (e) {
     var arrowBox = $( "<div>"+'@Ajax.JavaScriptStringEncode(Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "").ToHtmlString())' + "</div>");
     arrowBox.appendTo($("#imageContainer"));
     $('#TagCategoryId').select2();
})

我遇到了这个方法的错误。

未捕获类型错误：$(...).select2 不是函数

顺便说一句，我针对非动态创建的元素对其进行了测试，它可以正常工作。但是当涉及到动态创建的时，它就会停止工作。我错过了什么吗？谢谢。

Answer 1

我找不到真正解决问题的方法。最后，我将 GGroupDropDownListForJavascript 插入到 Html，如下所示。并从我的另一个 div 调用它。这不是一个很好的解决方案，但解决了我的问题。

        <div id="copyDiv">
            @Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "")
        </div>

和JS一样；

        var categoryBox = $('#copyDiv');
        categoryBox.appendTo(arrowBox);

更新

实际上，我添加了以上几行后它不起作用。它只会将相关的 select 列表放入我的 div 但我的 select 列表不再起作用。所以我像下面这样解决了我的问题；

执行以下方法；你必须在这里注意两件事。第一个是确保在 select2() select 前加上前缀 "select" 否则你会收到 "Uncaught query function not defined for Select2" 错误。这将解决这种情况，第二个是确保您的 select2.js 是最新的。

   $('body').on('DOMNodeInserted', 'select', function () {
        $("select.form-select").select2();
    });
   $("button").on("click", function () {
         $(".dcontainer").append($('@Ajax.JavaScriptStringEncode(Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "").ToHtmlString())'));
    });

我真的希望这会对某人有所帮助。

如何在动态创建的 select 列表上执行 select2() 函数？

How to execute select2() function on dynamically created select list?

dynamically-generated

jquery-select2

select2