[英]How can I send AJAX request for the content which are loaded via Infinite Scroll?
我正在构建一个类似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");
}
});
})
由于有很多推文,我设置了Infinite Scroll Plugin 。 当我没有设置Infinite Scroll时,AJAX请求运行良好。 但是当我设置时,那些AJAX请求不适用于那些通过Infinite Scroll加载的推文。 我的意思是,当我单击通过Infinite Scroll加载的推文中的“收藏夹”按钮时,它们不会向服务器发送AJAX请求。 但是AJAX请求可以使用通过默认HTML(而非无限滚动)加载的推文。
所以我的问题是如何解决这个问题? 如何发送通过Infinite Scroll加载的推文的AJAX请求?
提前致谢。
$('selector').on('event', callback)
仅绑定处理选择器时存在的元素的事件。 但是,无限滚动代码稍后会加载新元素,因此不会为它们绑定任何事件。
解决方案使用委托:
$('selector').on('click', 'i', function() {
// do stuff
});
selector
必须是包含所有(动态添加的) i
元素的父元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.