Javascript jQuery在AJAX插入的DOM元素上失败

我在名为

close

的类上编写了一个简单的jQuery函数

$(function () {
    $(".close").click(function () {
        $(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent
            $(this).slideUp(400);
        });
        return false;
    });
});

它工作得很好，但是如果我使用AJAX插入新的DOM元素，这个函数会失败吗？为什么会这样？虽然我知道这个解决方案，但它需要在通过AJAX响应插入的页面上编写相同的函数。我做到了，而且很有效。为什么它不能在全球范围内运作

---

我试图替换

$（“.close”）。单击（函数（）{

为

$（“.close”）。单击（“click”，函数（事件）{

，但它没有给我问题的确切解决方案。

这是因为单击事件要工作，元素应该出现在文档中…使用

on

委托事件

$(document).on("click",".close",function () {
    $(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent
        $(this).slideUp(400);
    });
    return false;
});

在ajax成功函数运行后添加youclick事件，但我更喜欢使用

on

委托事件（因为jquery中的

on

就是为了这个目的引入的）

我建议您使用最接近的静态父对象，而不是

文档本身，以获得更好的性能

要了解更多有关事件的详细信息，请使用和：


此外，淡出后不需要滑动，因为元素已隐藏
其次，默认的淡入淡出持续时间已经是400，您不需要再次声明速度
因为当DOM准备就绪时，jQuery绑定了
单击事件到元素。它不会监视与选择器匹配的新元素，因此在之后添加的任何元素都不会将单击事件绑定到您的函数中。为此，必须执行
$（'.close'）。单击（…）
在AJAX请求完成后。
您是否尝试使用“实时”方法

$(".close").live('click',function () {
    $(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent
        $(this).slideUp(400);
    });
    return false;
});

是的，确实如此。一切都是一样的。只有在插入的元素上使用相同的js代码时才有效。实际上，如果要反复静态地重新绑定每个
.close
元素，则必须首先解除所有现有处理程序的绑定，否则将注册重复的处理程序。实际上，
$（'.close'）。解除绑定（'click'））应调用
。
$(".close").live('click',function () {
    $(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent
        $(this).slideUp(400);
    });
    return false;
});