在AJAX调用之后重新初始化jQuery

Question

我有一个问题,在通过AJAX动态填充元素后,我的jQuery函数不能处理新内容.

我有一个文件列表,例如在点击"刷新"按钮时填充的文件.双击列表中的项目时,我想显示带有文件名的警报.每个项目都有"文件"类.

我正在使用此代码:

$('.file').on('dblclick', function(event){
                alert($(this).html());
            });

这适用于首先存在的任何元素,但不适用于AJAX调用之后.

这是一项学校作业,我需要使用常规的Javascript AJAX方法,而不是内置的jQuery AJAX功能.我猜这是问题以及jQuery没有注意到新填充的元素的原因.

刷新按钮正在调用此函数:

function getFileList()
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("files").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","filelist.php",true);
        xmlhttp.send();
    }

如果我被迫使用常规JS进行AJAX调用而不是jQuery的AJAX方法,我怎样才能让jQuery正确地注意到这些新元素呢？

Answer 1

问题是你只是将.on()附加到最初存在的".file"元素.您只需将.on()附加到文档并提供选择器作为选项.例如

$(document).on('dblclick', '.file', function(event){
    alert($(this).html());
});

这样,事件将附加到类"文件"的未来元素.