[英]Newly added dom elements not being selected
我有一个图像列表,可以通过ajax加载更多内容。 默认情况下,图像会加载到列表中。 当用户滚动时,另外4个项目将添加到列表中。 该列表每15秒通过ajax刷新一次,仅替换列表中的前7个项目。 问题在于,当将4个新项目添加到列表时,选择器似乎会忽略这些项目,因此不会从0索引中进行选择。
我知道这听起来很令人困惑,所以我将尝试通过一个简单的示例进行演示。
防爆
$(function () {
// Update ChannelStats
setTimeout(function () {
var refresh = setInterval(UpdateChannels, 15000);
UpdateChannels();
}, 15000);
function UpdateChannels() {
$.ajax({
type: "POST",
url: "ajax/ImageList.aspx/UpdateImages",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
// Newest
var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
$newestResults.fadeOut('slow'), function () {
remove()
};
$.each($newestResults, function (index, value) {
$(this).delay(index * 250).animate({
opacity: 0
}, 250,
function () {
$(this).remove();
$('#pcContentHolder_newest').append(data.d.Newest.HtmlChannelSegments[index]);
});
});
});
}
});
[请注意数字的顺序-这是图像加载的顺序]
在初始页面加载时,将加载第一张图像
1.在“初始页面加载”中加载以下图像
1 2 3 4 5 6 7
2.当用户滚动时,显示剩余的图像
1 2 3 4 5 6 7 8 9 10 11
3.更新脚本第一次运行
8 9 10 11 1 2 3 4 5 6 7
4.更新脚本第二次运行
4 5 6 7 1 2 3 4 5 6 7
5.以后每次更新脚本运行的顺序为
4 5 6 7 1 2 3 4 5 6 7
据我所知,这4个新添加的元素未包含在$('#newest .pcVideomaincontainer:lt(7)')
选择中。 我不确定在这种情况下或是否有其他技巧时如何使用“实时”。
我不确定这是否是您的主要问题,但是代码的这一部分缺少$(this).
在remove()
之前,也缺少结束括号。 你有这个:
var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
$newestResults.fadeOut('slow'), function () {
remove()
};
应该是这样的:
var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
$newestResults.fadeOut('slow'), function () {
$(this).remove()
});
解决此问题后,所有$ newestResults DOM对象都将被删除,因此我不确定为什么随后尝试使用以下代码行再次对其进行操作。
我从追加更改为前置,现在可以使用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.