Событие по щелчку, не запускающее первый раз динамически добавленные элементы через AJAX

Question

У меня есть элемент ul, который заполняется элементами li через AJAX. Затем мне нужно что-то сделать, нажимая на эти элементы li. Самое смешное, что он работает во второй раз, когда я нажимаю на элемент li, но не в первый раз.

Я прочитал все возможные связанные вопросы, которые я мог найти в StackOverflow, но не могу найти ответ на свою проблему.

Вот пример кода AJAX:

$('#university').on('keyup', function(){
    $.ajax({
            url: ajaxUrl,
            data: {
                "search": searchVal,
                "action": 'autoComplete',
            },
            type: "POST",
            dataType: 'json',
            success: function(data) {
                $(".univers-name-list").html("");
                var  dataItem=[];
                dataItem=data.data.items;
                if(dataItem){
                    dataItem.forEach(function(element,key) {
                        $(".univers-name-list").append('<li>'+element.name+'</li>')
                    });
                }
             }
    });
});

А вот функция нажатия (в том же файле):

$('.univers-name-list').on('click', 'li', function(e){
    // Code here
    console.log('Helo'); // Doesn't run the first time.
});

Есть идеи, что я делаю не так? Почему это работает, только когда я нажимаю на него во второй раз?

---

Дополнительная информация: Когда я проверял цель события, первый раз, когда я щелкаю по любому элементу li, целью является UL (заполненный динамически добавленными элементами LI), но второй раз - правильный элемент LI.

Answer 1

Вы должны вызвать addEventListener для новых созданных элементов. отметьте это Присоедините событие к динамическим элементам в JavaScript

Answer 2

Это было пользовательское правило проверки в поле ввода, которое все испортило. После исправления этого правила оно теперь работает как положено.

Answer 3

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

Вы должны использовать функции делегата для элементов такого типа

Этот код должен нормально работать с динамически создаваемым элементом.

$(document).on('click', '.univers-name-list li', function(e){
    // Code here
    console.log('Helo');
});