Функция jQuery $(element).each не работает с новыми добавленными элементами

Я использую функцию .each для итерации списка элементов. У меня есть начальный список согласованных элементов и .each отлично работает на них. Но я могу добавить новые элементы с помощью метода AJAX....each не работают над этими новыми добавленными элементами?

Я знаю о живых событиях и перезаписывании событий для вновь добавленных элементов, но .each не является событием. Я не мог найти никакой помощи в том, как правильно использовать это, чтобы повлиять на новые элементы.

Как это решить?


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

Спасибо, Primoz

Ответы

Ответ 1

Это происходит потому, что .each() пересекает согласованные элементы, когда он запускался... новым элементам не приходилось делать что-либо, когда вы его вызывали. Решение: повторите вызов, но только для новых элементов при их добавлении. Вам нужно вызвать тот же .each() в вашем результате ajax, с контекстом результата, чтобы ограничить их каждым.

Например, если у вас есть это:

$(".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...
}

Ключевым здесь является бит , 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');
}