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

Question

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

Answer 1

这是因为要让单击事件起作用，元素应该出现在文档中...使用 on 委托(delegate)事件

$(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委托(delegate)事件(因为jquery中的on是为此目的引入的)。

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

link阅读有关事件委派的更多信息