如何为通过 Infinite Scroll 加载的内容发送 AJAX 请求？答案

【问题标题】：How can I send AJAX request for the content which are loaded via Infinite Scroll?如何为通过 Infinite Scroll 加载的内容发送 AJAX 请求？
【发布时间】：2012-08-28 00:24:38
【问题描述】：

我正在构建一个类似 Twitter 的简单项目，但非常简单 :) 用户主页（时间轴）上有很多推文。所以每条推文都有 favorite 按钮。当用户点击收藏按钮时，它会向服务器发送 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");
        }
    });
})

由于推文很多，我设置了Infinite Scroll Plugin。当我没有设置无限滚动时，AJAX 请求运行良好。但是当我设置时，那些 AJAX 请求不适用于通过无限滚动加载的推文。我的意思是，当我单击通过无限滚动加载的推文的收藏按钮时，它们不会向服务器发送 AJAX 请求。但是 AJAX 请求适用于通过默认 HTML 而不是无限滚动加载的推文。

所以我的问题是如何解决这个问题？如何为通过 Infinite Scroll 加载的推文发送 AJAX 请求？

提前致谢。

【问题讨论】：

不相关，HTML ID 不应以数字开头
我用的是数字ID，不设置无限滚动时效果很好。所以我认为问题不取决于此。
我说“不相关”，只是让您知道它们可能有效，但不是有效的 HTML stackoverflow.com/questions/70579/…
我很确定它们在 HTML5 中是有效的，但无论如何都不是一个好习惯
数字 ID 在 HTML5 规范中有效。（+1 @elclanrs）

标签： javascript ajax jquery infinite-scroll

【解决方案1】：

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

解决方案是使用委托：

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

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

【讨论】：