我正在使用.each函数来遍历元素列表。我拥有匹配元素的初始列表,而且。但是我可以通过AJAX方法添加新的元素…。不要在这个新增的元素上工作?
我知道现场活动和新添加的元素的事件重新绑定,但是.each不是事件,我无法找到任何帮助,如何正确使用这一点影响新添加的元素。
如何解决这个问题?
//Uploadify callback where I add new items onComplete: function(event,queueID,fileObj,response,data) { $(".blank").remove(); $("#lib-contentWrap").append(response); } });
//我的每个循环,我循环元素。所有元素都是
包含在#lib-contentWrap div中。循环开始
如果我更改复选框的状态(=复选框,勾选/取消选中)!
$( ‘#CHK-选择’)。改变(函数(){
if($(this).is(‘:checked’)){
$(“。lib-item”)。each(function(){
if($(this).hasClass(‘item-selected’))$(this).slideDown(‘fast’);
});
}
else {
$(“。lib-item”)。each(function(){
if($(this).hasClass(‘item-selected’))$(this).slideUp(‘fast’);
});
}
});
谢谢,
普里莫兹
解决方法
这是因为.each()在运行时循环遍历匹配的元素…当您调用它时,新元素不会执行任何操作。解决方案:再次调用它,但仅当添加新元素时才会调用它。您需要在您的ajax结果上调用相同的.each(),结果的上下文将限制每个结果。
例如,如果你目前有这个:
$(".myDiv").each(function() { //stuff here });
您需要调用相同的选择器和相同的代码,在您的成功(或完成,无论您使用的)ajax函数如下所示:
success: function(resp) { $(".myDiv",resp).each(function() { //each,but only on the new guys //stuff here (same as before) }); //Do more stuff with your response... }
这里的关键是相应的位,它告诉jQuery选择与之前相同的元素,但仅在第二个参数的上下文中,在这种情况下:您的ajax响应包含需要爱的新元素。
基于新的问题代码进行更新
首先,您可以缩短代码(可选不需要):
$('#chk-selected').change(function(){ if($(this).is(':checked')) { $(".lib-item.item-selected").slideDown('fast'); } else { $(".lib-item.item-selected").slideUp('fast'); } });
在回调中,触发相同的处理程序再次运行(这不会改变选择,只需触发处理程序运行):
onComplete: function(event,data) { $(".blank").remove(); $("#lib-contentWrap").append(response); $('#chk-selected',response).trigger('change'); }