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动态创建的元素。

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

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

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

Answer 3

您必须调用addEventListener到新创建的元素。检查此Attach event to dynamic elements in javascript

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

3 个答案: