1

我遇到了一个问题，在通过 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 正确地注意到这些新元素？

4

2 回答 2

9

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

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

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

于 2012-11-22T17:38:46.723 回答
-2

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

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

编辑：如前所述，live已弃用且速度缓慢。总是喜欢on。

于 2012-11-22T17:35:01.410 回答