0

На станицу при помощи 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
    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
    29 авг 2017 в 18:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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