17

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

Primoz Rome
  • 10,379
  • 17
  • 76
  • 108

1 Answers1

12

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');
}
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • I tried this but it doesn't work... And duplicating code doesn't sound a nice practice at all as it increases the chance of bugs and needs more support. – Primoz Rome Mar 01 '10 at 09:05
  • You don't need to duplicate code. You can assign a name to the function and use it in both places. – Carles Company Mar 01 '10 at 09:27
  • Yes sure that's correct, but anyway the solution didn't work for me... I've copied my .each code in my onComplete function, where I add new elements, but the each still worked only on original elements. – Primoz Rome Mar 01 '10 at 09:29
  • @Primoz Rome - Updated the answer for your specific posted code, let me know if it gives you any problems. – Nick Craver Mar 01 '10 at 11:17
  • @Nick: I think it should be `.lib-item.item-selected` - with no space in between - you're checking whether `.lib-item` hasClass `.item-selected` – Adam Kiss Mar 01 '10 at 11:25
  • I cannot find the response callback in today's [post-1.8 jQuery](https://api.jquery.com/jQuery.ajax/#jqXHR). How should one use your approach with these newer version of jQuery? An update may be beneificial. – Bram Vanroy Apr 25 '16 at 09:40