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

Question

Я использую функцию .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); } });</p> <p>//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'); }); } });</p> <p>

Спасибо, Primoz

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