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

Question

我在名为close.

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

Answer 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委托事件（因为on在jquery中为此目的引入了）..

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

链接以阅读有关事件委托的更多信息

Answer 2

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

Answer 3

使用on和fadeOut：

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

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

Answer 4

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

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