Каскадные раскрывающиеся списки перестают работать после рендеринга формы через Ajax в ASP.NET MVC ⇐ Jquery

[Anonymous]

У меня есть форма ASP.NET MVC с каскадными раскрывающимися списками (Категория -> Подкатегория).

Все работает нормально, когда форма отображается в представлении нормально.
Однако я изменил свой код, чтобы динамически отображать форму через Ajax в аккордеон:

Код: Выделить всё

 $(".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();
}
});

});

После этого изменения каскадные раскрывающиеся списки перестают работать. Мой код jQuery выглядит следующим образом:

Код: Выделить всё

// 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();
}
});
}
});

Я пробовал использовать делегирование событий следующим образом:

Код: Выделить всё

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

но он по-прежнему не работает после обработки формы через Ajax.
Что мне не хватает? Как я могу заставить каскадные раскрывающиеся списки работать правильно после динамического рендеринга формы?
Будем благодарны за любую помощь. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/798 ... sp-net-mvc