在动态添加的 div 上启动 owl carousel

Question

我有一个包含电影信息的数据库。现在我想通过单击按钮来搜索这个数据库。单击时，必须搜索一组搜索词并返回到视图。

这一切都按计划进行，但现在我想将它们显示为：

搜索词 #1
--> 此搜索词的电影海报轮播。

搜索词 #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

您应该使用 owls 函数来添加您的项目，例如：

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

希望有帮助！