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 me

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