Как сделать перебор элементов добавленных в DOM?

Question

[vottakoinick]

$('.block').each(function (index, value){ });
Такой способ не видит элементы которые добавлены после загрузки страницы
Например отследить клик можно так
$(document).on('click', '.block', function(e){ });
А как сделать перебор?

Comments

[vottakoinick]

molekulyarniy, each не видит блоки добавленные в DOM с помощью javascript, each делает перебор только блоков которые уже были при загрузки страницы.

Answer 1

[Сергей Соколов]

Селектор jQuery возвращает статичный набор элементов, которые нашлись на тот момент.
Поэтому после добавления блоков надо снова вызывать этот выбор: $(".block").

Или использовать «живую» коллекцию, которую возвращает, например, getElementsByClassName().

Или «делегировать» события: ловить клики выше, на общем родителе, например, на document, и там уже смотреть, кликнули по элементу с нужным классом или нет.

Comments

[vottakoinick]

Вот я добавил блоки, а потом уже запускаю each и перебор делается только по блокам которые, уже были при загрузки страницы, а те что добавлены игнорируются.

Я запускаю уже после добавления.

[Сергей Соколов]

vottakoinick, точно ли после добавления?
Вот пример с добавлением через 1.5 секунды, работает:

[vottakoinick]

Сергей Соколов, по моему через setTimeout работает, а просто по клику на кнопку например нет.

[vottakoinick]

можно сделать правда по клику на кнопку через setTimeout

[Сергей Соколов]

vottakoinick, покажите ваш код, или сделайте упрощённый Fiddle – может по ходу дела разберётесь, почему у вас коллекция статичная используется.

[vottakoinick]

Сергей Соколов,

$('.add_question').on('click', function() {
  $('<div class="question__block">111</div>').insertBefore('.add_question');
});

$('.add_answer').on('click', function() {
  if (validate) {
    $('#create_new_polls .questions__block').each(function(index, value) {
      console.log(index);
    });
  }
});

[Сергей Соколов]

vottakoinick, question__block vs .questions__block

Буква S

[vottakoinick]

Сергей Соколов, да ошибка была в названии класса

Answer 2

[Rsa97]

Всё работает. Показывайте свой код.

Comments

[vottakoinick]

Странно работает, а у меня нет:

$('.add_question').on('click', function() {
	$('<div class="question__block">111</div>').insertBefore('.add_question');
});

$('.add_answer').on('click', function() {
	if (validate) {
		$('#create_new_polls .questions__block').each(function(index, value) {
			console.log(index);
		});
	}
});

Может из-за insertBefore

[Rsa97]

vottakoinick, Нет, с insertBefore тоже работает.
Скорее всего, вы добавляете новые элементы за пределами блока #create_new_polls. Откройте в браузере инспектор кода и смотрите, куда вставляется элемент.
Добавил вариант с insertBefore в пример.

[vottakoinick]

Rsa97, ошибка была в названии класса questions__block и question__block, всё работает