Javascript 单击事件不会通过AJAX在动态添加的元素上第一次触发

我有一个ul元素，它通过AJAX使用li元素填充。 然后我需要在点击那些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>')
                    });
                }
             }
    });
});

知道我做错了什么吗？为什么只有当我第二次点击它时它才起作用

---

更多信息：

---

当我检查事件目标时，第一次单击任何li元素时，目标是UL（用动态添加的li元素填充），但第二次是正确的li元素。

事件监听器将不适用于通过javascript动态创建的元素

对于这类元素，必须使用委托函数

此代码应该可以在动态创建的元素上正常工作。

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

---

必须为新创建的元素调用addEventListener。

---

检查此项

输入字段上的自定义验证规则将一切都搞糟了。

---

修复该规则后，它现在可以正常工作。

我认为我们需要更多详细信息，特别是单击处理程序函数的内容。即使是console.log（'helo'）也不会在单击处理程序函数内执行。-我无法重现这个问题，这很有趣。这段代码有效。但不是真正的ajax。有什么想法吗？@Quentin我已经在文档中试过了你的代码片段，效果很好。但一旦我把它放进一个键控回调中，它就不起作用了。这就是真正启动ajax的原因。我会刷新我的代码。不，他们不会。他们正在使用事件委托，也就是说，或多或少，他们已经在做的事情。它们只是绑定到

.univers name list

（在文档中），而不是

文档

。

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