点击事件未通过AJAX首次触发动态添加的元素

Question

我有一个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>')
                    });
                }
             }
    });
});

这里是上点击功能（在同一个文件）：

$('.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

这是输入字段上的自定义验证规则，将所有内容弄乱了。 修正该规则后，它现在可以按预期运行。

Answer 2

事件侦听器将无法使用通过JavaScript动态创建的fFor元素。

您必须对此类元素使用委托函数

对于动态创建的元素，此代码应该可以正常工作。

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

Answer 3

您必须将addEventListener调用到新创建的元素。 检查此Attach事件到javascript中的动态元素