未选择新添加的dom元素
Newly added dom elements not being selected
我有一个图像列表,它能够通过ajax加载更多内容。默认情况下,会将图像加载到列表中。当用户滚动时,另外4个项目被添加到列表中。该列表每15秒通过ajax刷新一次,只替换列表中的前7项。问题是,当4个新项目添加到列表中时,选择器似乎会忽略这些项目,因此不会从0索引中进行选择。
我知道这听起来很困惑,所以我将尝试用一个简单的例子进行演示。
Ex
$(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 6 7
5.每次更新脚本运行时,订单都是
4 5 6 7 1 2 3 4 5 6 6 7
据我所知,这4个新添加的元素不包括在$('#newest .pcVideomaincontainer:lt(7)')
选择。我不确定在这种情况下如何使用"live",或者是否有其他技术。
我不确定这是否是您的主要问题,但您的代码的这一部分在remove()
之前缺少一个$(this).
,也缺少一个结束paren。你有这个:
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对象将全部删除,所以我不确定为什么要用下面的代码行再次对它们进行操作。
我从append改为prepend,现在可以工作了。
相关文章:
- 如何在DOM元素上按类型构建此函数
- DOM元素和angular元素之间的主要区别是什么
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 使用jquery创建dom元素会导致ie9出现拒绝访问错误
- 如何在使用Ractive.extend()时引用DOM元素
- 在d3中向DOM元素添加了图像,但现在它赢得了't过渡
- 如何'剪切'DOM元素并将其显示在其他位置
- 转换<a>使用jQuery将文本字符串转换为dom元素
- d3在数据更新时错误地附加了dom元素
- 访问VueJS中的DOM元素
- 在Meteor中如何查找DOM元素(渲染后)
- IE9-添加和删除DOM元素会破坏父keydown事件
- 未捕获错误:元素缓存中id为x的DOM元素与DOM中的元素不同
- 在 ng-if 编译后访问指令中的 DOM 元素
- spin.js/angular spinner:如何将spin定位到DOM元素中(包括plunker演示)
- 如何在dom元素中插入输入标记数据插件
- Mobile Safari、jQuery以及绑定到未来的DOM元素
- 从字符串创建dom元素时添加多个类
- 如何根据客户端的屏幕大小使用javascript更改DOM元素
- 为onClick-hander插入临时DOM元素