Как находить подгружаемые элементы через JQuery?

Question

[Игорь]

При скроле происходит подгрузка постов, как можно вешать обработчики на определенные класы которых не было изначально в DOM дереве?
Как словить эти посты и поставить на них обработку скриптом?
Пробовал через $(document).find не сработало.
Заранее спасибо
Если раскажете как сделать на ванильном и на джейквери буду очень благодарен

Answer 1

[NonameMeTrue]

Предположим, что все новые посты со скроллинга отправляются в общий контейнер с классом postsArea.

Тогда можно отследить у новорождённых элементов - является ли контейнер postsArea родителем. Если да - обработать по нуждам.

//Полифилл closest:
if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = 
  function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
          i,
          el = this;
      do {
          i = matches.length;
          while (--i >= 0 && matches.item(i) !== el) {};
      } while ((i < 0) && (el = el.parentElement)); 
      return el;
  };
}

function handlerForNative (e) {
	//Если входящий DOM - не элемент, а текст.
	if(!e.target.closest) return;
	//Если принадлежит нужному контейнеру.
	if(e.target.closest('.postsArea')) {
		//Проверив нужды - имеем доступ к новому посту.
		var newPostElement = e.target;
		//И делаем с ним что угодно.
		//newPostElement.addEventListener
	} //Иначе - игнорируем.
}

//Для jQuery не требуется полифилл.
function handlerForJquery (e) {
	if(!e.target.closest) return;
	if($(e.target).closest('.postsArea').length) {
		var newPostElement = $(e.target);
		//newPostElement.on
	}
}

//Native:
document.addEventListener('DOMNodeInserted', handlerForNative);

//jQuery:
$(document).on('DOMNodeInserted', handlerForJquery);

Comments

[NonameMeTrue]

Ответ выше лучше использовать всего, если нужен полный доступ к новому элементу.

Если же нужно наложить исключительно события, то можно просто использовать общий ивент для соответствующего класса:

$(document).on('eventName', '.newPostElement', function() {
	//Handler для всех элементов с классом newPostElement вне зависимости от того, когда был добавлен элемент с упомянутым классом.
});

[Игорь]

NonameMeTrue, Спасибо