dynamically-generated - 如何在动态创建的选择列表上执行 select2() 函数？

Question

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

在下面，我将我的选择列表传递到一个方法中，该方法带有一个名为 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);

更新

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

执行下面的方法；你必须在这里注意两件事。第一个是确保为您的 select2() 选择器添加前缀“select”，否则您将收到“未为 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())'));
    });

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