Инициировать сову карусели на динамически добавленном div

Question

У меня есть БД, содержащая информацию о фильме. Теперь я хочу искать через эту базу данных нажатием кнопки. При щелчке необходимо выполнить поиск по массиву поисковых терминов и вернуть их в представление.

Все это идет по плану, но теперь я хочу отобразить их как:

Searchterm # 1
-> Карусель постеров фильма по этому поисковому запросу.

Searchterm # 2
-> Карусель постеров фильма по этому поисковому запросу.

так далее..

Все идет хорошо, я могу получить данные и отобразить их. Единственная проблема в том, что я не могу заставить работать карусель.

Вот мой JavaScript:

 function ScanForMovies()
{
    $.ajax({
        url: '@Url.Action("ScanForMovies", "Home")',
        type: 'GET',
        error: function(XMLHttpRequest, textStatus, errorThrown)
        {
            alert(errorThrown);
        },
        beforeSend: function () {
            $('#loadImage').show();
        },
        complete: function () {
            $('#loadImage').hide();
        },
        success: function (result) {
            $('#result').append('<div class="owl-carousel-v1 margin-bottom-50">');

            $.each(result, function (index, item) {
                $("#result").append('<h4 class="heading-md">' + item.Title + ' <sup>(' + item.Year + ')</sup></h4>');
                $("#result").append('<div id="' + item.Title.replace(/\s/g, '') + '" class="owl-slider">');

                $.each(item.Movies, function (ind, it) {
                    $("#" + item.Title.replace(/\s/g, '')).append('<div class="item"><img src="' + ROOT + it.Poster + '" alt="" width="120px" height="120px"/></div>');
                });

                $("#" + item.Title.replace(/\s/g, '')).append('</div>');
            });

            $('#result').append('</div>');


        },
        async: true,
        processData: false
    });
}

Вот как я начинаю совую карусель:

$(document).ready(function ($) {

    $('.owl-slider').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        navText: ["<", ">"],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 5
            }
        }
    });
});

Как видите, я добавляю div динамически. Сова-карусель не активируется.

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

У кого-нибудь есть идеи, как решить мою проблему?

Спасибо за чтение (и, надеюсь, отвечаю;))

Answer 1

Вы должны использовать функции совы, чтобы добавить свои элементы, что-то вроде:

var owl = $('.owl-slider').owlCarousel({your options});
var item = '<div class=" item...">your new div</div>';
owl.data('owlCarousel').addItem(item); 
owl.reinit(); 

Надеюсь, это поможет!