Как запустить слайдер на элементах полученных через ajax?

Question

[zahar_92]

Есть 4 таба, в каждом набор div, которые загружаются через ajax. Первый (активный таб) загружается при загрузке страницы, тут все ок. Второй и следующие подгружают контент один раз при клике на заголовок таба. Все это происходит в битриксе. Слайдер slick, но тут не принципиально.
Цель: инициализировать слайдер после получения элементов через ajax. Как отследить, что элементы загрузились и в этот момент запустить слайдер?

Примерный код такой

<ul class="tabs ajax">
	<li data-code="NEW" class="active"><span>Новинка</span></li>
	<li data-code="STOCK"><span>Акция</span></li>
	<li data-code="HIT"><span>Хит</span></li>
</ul>

<ul class="tabs_content">
	<li class="tab NEW_wrapp" data-code="NEW">
		<div class="catalog_block ajax_load active">
			<div>Товар 1</div>
			<div>Товар 2</div>
			<div>Товар 3</div>
		</div>
	</li>
	<li class="tab STOCK_wrapp" data-code="STOCK">
		<div class="catalog_block">
			До ajax запроса тут пустота
		</div>
	</li>
	<li class="tab HIT_wrapp" data-code="HIT">
		<div class="catalog_block">
			До ajax запроса тут пустота
		</div>
	</li>
</ul>

$(document).ready(function(){
	$(elem).slick({
		infinite: false,
		slidesToShow: 5,
		slidesToScroll: 1
	});
});

Comments

[Lynatik001]

А сам Аякс запрос где?)
После просто через js добавляет теги с данными с запроса

[zahar_92]

Я не знаю где сам запрос. Где-то в недрах битрикса.

[Lynatik001]

Выше $(elem)...... Кода напиши Аякс запрос и с применением await

[zahar_92]

Я не могу переписать ajax запрос, т.к. он уже вшит в ядро битрикса и там черт ногу сломит. Простейшим выходом, как мне кажется, было бы отследить изменение состояния div.catalog_block. Например появление у него класса ajax_load или появление внутри него новых элементов. Но что-то не выходит каменный цветок.

[Lynatik001]

zahar_92, а как ты планировал вообще данные с того запроса в коде использовать? Вопрос же не по нему был

[zahar_92]

Навесить класс на родителя и запустить слайдер. Проблема в том, что до появления детей у .catalog_block слайдер нельзя инициализировать. Соответственно для инициализации слайдера на закрытом табе, мне нужно определить открытие таба и появление элементов. В общем когда будут загружены товары в табе, нужно запустить этот код

$(document).ready(function(){
  $(elem).slick({
    infinite: false,
    slidesToShow: 5,
    slidesToScroll: 1
  });
});

[Сергей Сергей]

В jQuery есть возможность перехватывать выполнение ajax-запросов, так можно просмотреть содержимое каждого загружаемого куска и реагировать.
https://basicweb.ru/jquery/jquery_method_ajaxsetup.php

Answer 1

[zkrvndm]

Для отслеживания изменений в html коде страницы Вам необходимо использовать MutationObserve.