我如何发送AJAX请求的内容是通过无限滚动加载的

How can I send AJAX request for the content which are loaded via Infinite Scroll?

本文关键字：无限 加载 滚动 何发送 AJAX 请求      更新时间：2023-09-26

我正在构建一个类似Twitter的简单项目，但非常简单：）用户主页上有很多推文（时间线）。因此，每条推文都有收藏夹按钮。当用户点击收藏按钮时，它会向服务器发送AJAX请求来存储收藏的推文。所以最喜欢的按钮是这样的：

<a href="#" id="1"><i class="icon-star-empty"></i></a>
<a href="#" id="2"><i class="icon-star"></i></a>
<a href="#" id="3"><i class="icon-star-empty"></i></a>
...
...

我使用以下JavaScript发送AJAX请求：

$("i").on("click", function() {
    if ( $(this).hasClass("icon-star-empty") ){
        ajaxURL = "/setFavorite"
    } else{
        ajaxURL = "/removeFavorite"
    }
    var linkID = $(this).parent().prop("id");
    var obj    = $(this);
    $.ajax({
        url: ajaxURL,
        type: "POST",
        data: {quoteID : linkID},
        success: function() {
            obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
        }
    });
})

由于有很多推文，我设置了无限滚动插件。当我没有设置无限滚动时，AJAX请求工作得很好。但当我设置时，那些AJAX请求对那些通过无限滚动加载的推文不起作用。我的意思是，当我点击通过无限滚动加载的推文的收藏夹按钮时，他们不会向服务器发送AJAX请求。但AJAX请求可以处理通过默认HTML而不是无限滚动加载的推文。

所以我的问题是如何解决这个问题？我如何发送AJAX请求通过无限滚动加载的推文？

提前谢谢。

$('selector').on('event', callback)仅绑定处理选择器时存在的元素的事件。但是，无限滚动代码稍后加载新元素，因此不会为它们绑定任何事件。

解决方案是使用委托：

$('selector').on('click', 'i', function() {
    // do stuff
});

selector需要是包含所有（动态添加的）i元素的父元素。

相关文章：