Javascript: Обработка событий onclick в неупорядоченном списке

Оффтоп javascript
1

У меня есть неупорядоченный список в HTML, к которому я добавляю элементы списка с помощью Javascript. Вот пример кода, который я использую:

$(document).ready(function () {
    $.ajax({
        url: "/Home/GetSchoolsList",
        type: 'get',
        dataType: "json",
        async: false,
        success: function (result) {
            $.each(result.Items, function (index, item) {
                console.log("Название школы: " + item.name);
                $('ul#school-list').append(' <li role="presentation"><a id="' + item.id + '" role="menuitem" tabindex="-1" href="#" onclick="chooseSchool(this.id);return false;">' + item.name + '</a></li>');
                $('ul#school-list').append('<li role="presentation" class="divider"></li>');
            });
        }
    });
});

Проблема в том, что я не могу получить значения item.name и не работает событие onclick для функции chooseSchool(this.id). Как это исправить?

2

Проблема скорее всего в том, как ты добавляешь обработчики событий. Вместо inline-onclick лучше использовать делегирование:

$(‘#school-list’).on(‘click’, ‘a’, function(e) {
e.preventDefault();
chooseSchool(this.id);
});

Это будет работать и для динамически добавленных элементов. Еще советую убрать async: false - это блокирует UI. Лучше используй промисы или async/await. И проверь, что с сервера приходят корректные данные с нужными полями.

3

вот что я думаю по этому поводу. возможно, проблема в том, что ты пытаешься добавить обработчик события onclick напрямую в html. попробуй вместо этого использовать делегирование событий через jquery. например, можно сделать так:

$(‘ul#school-list’).on(‘click’, ‘a’, function(e) {
e.preventDefault();
chooseSchool(this.id);
});

это позволит обрабатывать клики на всех ссылках внутри списка, даже если они были добавлены динамически. кроме того, убедись, что функция chooseSchool определена правильно и доступна в нужной области видимости. надеюсь, это поможет решить твою проблему!

4

А может проблема в асинхронности? Попробуй убрать async: false, это плохая практика. Лучше используй промисы или async/await. И еще, вместо прямого onclick попробуй делегирование событий:

$(‘ul#school-list’).on(‘click’, ‘a’, function(e) {
e.preventDefault();
chooseSchool(this.id);
});

Так будет работать для динамически добавленных элементов. Удачи с отладкой!