1

На станицу при помощи Ajax я подгружаю данные из <div class="content"> в зависимости от выбранного пункта меню.

 $('#nav li a').click(function () {

    var toLoad = $(this).attr('href') + ' .content';

    $('.content').load(toLoad);

    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

    return false;

});

В некоторых контейнерах имеется плагин Slick который соответственно динамически подгружается на страницу.

Плагин я инициализирую следующим кодом:

$('#slick_content').slick({
   infinite: true,
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   dots: true
});

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

1
  • добавь пример твоей начальной разметки, и примеры того, что ты подгружаешь
    – Grundy
    Commented 31 авг. 2017 в 11:39

1 ответ 1

0

Решение вашего вопроса в событиях. Для начала надо создать функцию-обертку для инициализации слайдера

function sliderInit($slick_container){
    if(!$slick_container.hasClass('slick-initialized')) {
        // слайдер
        $slick_container.slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
            arrows: false,
        });
    }
}

Эта функция инициализирует переданный контейнер слайдера (именно jQuery объект) только один раз. И когда подгружаете данные динамически, запускаете эту функцию

$.ajax({
    // ПАРАМЕТРЫ
    success: function(data){
        // добавляете данные в разметку
        // и жалательно идентифицируйте 
        // каджый слайдер классами или id

        // после добавления данных
        sliderInit($('#slider'));
    }
});

Это в случае с ajax В вашем случае надо переработать блок $('.content').load(toLoad);

1
  • Попробовал ваш метод, всё равно не хочет инициализировать слайдер. Вот мой код $('.content').load(toLoad, function(){ sliderInit($('#slick_content')); }); Ошибка:$slick_content.slick is not a function at sliderInit (script.js:6) at HTMLDivElement.<anonymous> (script.js:30) at HTMLDivElement.<anonymous> (
    – SmeGol
    Commented 29 авг. 2017 в 18:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.