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

【问题标题】：jQuery fails on DOM element inserted by AJAXjQuery 在 AJAX 插入的 DOM 元素上失败
【发布时间】：2015-08-08 03:28:56
【问题描述】：

我在名为 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").on("click", function(event){ 替换$(".close").click(function () {，但它并没有为我的问题提供确切的解决方案。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这是因为点击事件的工作元素应该出现在文档中...使用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 成功功能起作用后添加您的点击事件，但我更喜欢使用 on 委托事件（因为为此目的在 jquery 中引入了 on）..

我建议您使用最接近的静态父级，而不是 document 本身以获得更好的性能......

link 阅读更多关于委托事件的信息

【讨论】：

【解决方案2】：

因为当 DOM 准备好时，jQuery 将 click 事件绑定到元素。它不会监视匹配选择器的新元素，因此之后添加的任何元素不会将点击事件绑定到您的函数。为此，您必须在 AJAX 请求完成后执行$('.close').click(...)。

【讨论】：

实际上，如果您要一遍又一遍地静态重新绑定 every .close 元素，那么您必须首先取消绑定所有现有的处理程序，或者您最终会注册重复的处理程序。
确实，应该调用$('.close').unbind('click')。

【解决方案3】：

使用on 和fadeOut：

$("body").on('click', '.close', function() {
    $(this).parent().fadeOut();
    return false;
});

此外，您无需在淡出后上滑，因为该元素已经隐藏。
其次，默认的淡入淡出持续时间已经是400，你不需要再次声明速度。

【讨论】：

是的，确实如此。一切都是一样的。仅当我在插入的元素上使用相同的 js 代码时它才有效。

【解决方案4】：

您是否尝试过使用“实时”方法。

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

【讨论】：