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（）附加到文档并提供选择器作为选项。 e.g。

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

这样，事件将被附加到类“file”的未来元素。

Answer 2

jQuery.on绑定到DOM中已有的元素。如果您需要绑定到将来的元素，可以使用jQuery.live或取消绑定并再次使用jQuery.on重新绑定。前者更容易。

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

编辑：如上所述，live已被弃用且速度很慢。总是更喜欢on。

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

2 个答案: