jquery-selectors – jQuery $(element).each函数对新添加的元素不起作用

前端之家收集整理的这篇文章主要介绍了jquery-selectors – jQuery $(element).each函数对新添加的元素不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用.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');
}

猜你在找的jQuery相关文章