jQuery $(element).each function doesn't work on newly added elements

Question

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

Answer 1

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');
}