Kaskadierende Dropdowns funktionieren nicht mehr, nachdem das Formular über Ajax in ASP.NET MVC gerendert wurde ⇐ Jquery

[Anonymous]

`Ich habe ein ASP.NET MVC-Formular mit kaskadierenden Dropdowns (Kategorie -> Unterkategorie).

Alles funktioniert gut, wenn das Formular normal in der Ansicht gerendert wird.
Ich habe jedoch meinen Code geändert, um das Formular dynamisch über Ajax in ein Akkordeon zu rendern:

Code: Select all

` $(".js-render-form").on("click", function () {
var btn = $(this);
var accordion = $("#accordion");

$.get({
url: btn.data('url'),
success: function (form) {
accordion.find(".accordion-body").html(form);
},
error: function () {
errorMessage();
}
});

});  `

Nach dieser Änderung funktionieren die kaskadierenden Dropdown-Menüs nicht mehr. Mein jQuery-Code sieht so aus:

Code: Select all

// jQuery code for cascading dropdowns
$("#CategoryId").on("change", function() {
var categoryId = $(this).val();
var subCategory = $("#SubCategoryId");
subCategory.empty().append('\-- Select Category --\');

if (CategoryId) {
$.ajax({
url: '/Categories/GetSubCategories?categoryId=' + categoryId,
success: function(data) {
$.each(data, function(i, item){
subCategory.append($("\").val(item.value).text(item.text));
});
},
error: function() {
errorMessage();
}
});
}
});

Ich habe versucht, die Ereignisdelegierung wie folgt zu verwenden:

Code: Select all

$(document).on("change", "#CategoryId", function() { ... });

aber es funktioniert immer noch nicht, nachdem das Formular über Ajax gerendert wurde.
Was fehlt mir? Wie kann ich dafür sorgen, dass die kaskadierenden Dropdown-Listen nach dem dynamischen Rendern des Formulars korrekt funktionieren?
Jede Hilfe wäre dankbar. Danke!`