jQuery $(element).each函数不适用于新添加的元素 [英] jQuery $(element).each function doesn't work on newly added elements

问题描述

我正在使用.each函数来迭代元素的谷值列表.我有匹配元素的初始列表，.each在这些元素上效果很好.但是我可以通过AJAX方法添加新元素....每个都不适用于这个新添加的元素吗?

我了解实时事件和新添加元素的事件重新绑定，但是.each不是事件，我找不到如何正确使用它来影响新添加元素的帮助.

如何解决这个问题?

谢谢， Primoz

解决方案

这是因为.each()在运行时在匹配的元素之间循环...调用时，新元素并没有作用它.解决方案:再次调用它，但仅在添加新元素时调用它们.您需要在ajax结果上调用相同的.each()，并在结果的上下文中限制每个.each().

例如，如果您当前有这个:

$(".myDiv").each(function() {
 //stuff here
});

您需要成功调用相同的选择器和相同的代码(或完成此操作，无论使用什么方式)，如下所示:

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...
}

这里的键是, resp位，它告诉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, queueID, fileObj, response, data)
{
    $(".blank").remove();
    $("#lib-contentWrap").append(response); 
    $('#chk-selected', response).trigger('change');
}

I am using .each function to iterate trough list of elements. I am having initial list of matched elements and .each works great on these. But I can add new elements via AJAX method... .each don't work on this newly added elements?

I know about live events and rebinding of events for newly added elements, but .each is not event I could not find any help on how to use this correctly to affect newly added elements.

How to solve this?

//Uploadify callback where I add new items
onComplete: function(event, queueID, fileObj, response, data)
{
    $(".blank").remove();
    $("#lib-contentWrap").append(response); 
}
});


//And my each loop where I loop the elements. All elements are 
wrapped inside the #lib-contentWrap div. And the looping begins 
if I change the state of a checkbox (=checkbox check/uncheck)!
$('#chk-selected').change(function(){
    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');
        }); 
    }
});

Thanks, Primoz

解决方案

This is because the .each() loops through the matched elements when it was run...the new elements weren't there to do things to when you called it. Solution: call it again, but only for the new elements when you add them. You need to call the same .each() on your ajax result, with the context of the result to restrict the each to it.

For example if you have this currently:

$(".myDiv").each(function() {
 //stuff here
});

You need to call the same selector and same code in your success (or complete, whatever you're using) ajax function like this:

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...
}

The key here is the , resp bit, it tells jQuery to select the same elements you were before, but only inside the context in the second parameter, in this case: your ajax response containing the new elements that need love.

Update based on new question code

First, you can shorten your code here (optional not required):

$('#chk-selected').change(function(){
    if($(this).is(':checked')) {
        $(".lib-item.item-selected").slideDown('fast');
    }
    else {
        $(".lib-item.item-selected").slideUp('fast');
    }
});

In the callback, trigger the that same handler to run again (this won't change the selection, just trigger the handler to run):

onComplete: function(event, queueID, fileObj, response, data)
{
    $(".blank").remove();
    $("#lib-contentWrap").append(response); 
    $('#chk-selected', response).trigger('change');
}

这篇关于jQuery $(element).each函数不适用于新添加的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！