如何在動態創建的選擇列表上執行select2（）函數？

我只是簡單地創建一個選擇列表動態按鈕單擊並將其附加到一個div。它工作沒有問題，但是當我希望這個選擇列表的行爲像select2那樣可以搜索時，它不起作用。如何在動態創建的選擇列表上執行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(); 
})

我越來越低於這種方法的錯誤。

遺漏的類型錯誤：$（...）選擇2不是一個函數

我測試了它的非動態創建的元素順便說一句，它是工作沒有任何問題。但是當談到動態創建一個它停止工作。我錯過了什麼嗎？謝謝。

來源

2016-01-17 revolver

我找不到解決我問題的方法。最後，我像下面那樣插入我的GGroupDropDownListForJavascript到Html。並從我的其他div中調用它。這不是一個好的解決方案，但爲我解決了這個問題。

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

和JS很像;

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

UPDATE

其實在我上面的行添加這是行不通的。它只會將相關的選擇列表放入我的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())')); 
    });

我真的希望這會幫助別人。

來源

2016-01-18 21:00:19 revolver

如何在動態創建的選擇列表上執行select2（）函數？

回答

相關問題