JQuery не изменил динамический контент

Я пытаюсь создать каскадное выпадающее меню со всеми динамическими элементами.

Мой Html:

 <select id="Sites" name="SelectedSiteId"><option value=""></option></select>
 <select id="Sectors" name="SelectedSectorId"><option value=""></option></select>

У меня есть 2 функции для загрузки элементов с помощью ajax, оба работают нормально:

function GetSites() {
        $.ajax({
            url: '/Sites/GetSites',
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error ocurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });
                $("#Sites").html(items);
            }
        });
    }

    function GetSectors(siteId) {
        $.ajax({
            url: '/Sites/GetSectors',
            data: { siteId: siteId },
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error ocurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });
                $("#Sectors").html(items);
            }

        });
    }

Мне нужно вызвать GetSectors на основе выбора сайта. У меня есть это:

$(document).ready(function () {                       
        $("#Sites").on("change", function (e) {
            var siteId = $("#Sites").val();
            GetSectors(siteId);                
        });

        GetSites();
    });

Но это не сработает. Я использую jquery 1.8.3.

Любая идея, где проблема?

Спасибо!

Ответ 1

Попробуйте Делегирование событий:

$(document).on("change", "#Sites", function(){
    var siteId = this.value;
    GetSectors(siteId);  
});

Бурное поведение событий позволяет нам "делегировать события" - привязки обработчиков к элементам высокого уровня, а затем обнаружение низкоуровневый элемент инициировал событие.

Событие делегирования имеет два основных преимущества. Первый, он позволяет нам связывать меньше обработчиков событий, чем нам пришлось бы связывать, если бы мы слушали клики по отдельным элементам, которые могут быть большим приростом производительности. Второй, он позволяет привязываться к родительским элементам - таким как неупорядоченный список - и знайте, что наши обработчики событий будут срабатывать, как ожидалось, даже если содержимое этого родительского элемента изменится.

Взято из: http://jqfundamentals.com/chapter/events

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементы потомков, которые будут добавлены в документ позже. От выбор элемента, который, как гарантируется, будет присутствовать во время делегированный обработчик событий, вы можете использовать делегированные события для избегайте частого прикрепления и удаления обработчиков событий.. элемент может быть элементом контейнера представления в Model-View-Controller, например, или документ, если событие обработчик хочет контролировать все пузырьковые события в документе. элемент документа доступен в начале документа до загружать любой другой HTML, , поэтому безопасно прикреплять события туда без ожидая готовности документа.

Взято из: http://api.jquery.com/on/

Ответ 1

Ответ 2