javascript – 从ajax调用中对动态HTML应用猫头鹰轮播

我需要将一个猫头鹰轮播及其所有CSS应用于来自ajax调用的动态HTML元素.

目前,代码如下所示：

jQuery(function ($) {
    $('.entry-content').addClass('entry-content--quiz')
    $('.get-questions').on('click', function (e) {
        e.preventDefault();
        let url = $(this).attr('href');
            $.ajax({
                url: url,
            }).done(function (data) {
                $('.entry-content').html(data);
                $('#wpvq-page-0').owlCarousel({
                    items:1,
                    slideBy: 1,
                    stagePadding: 0,
                    nav: true,
                    dots: false,
                });
            }).fail(function (err) {
                console.log('ajax err back', err);
            });
        return false;
    });
});

这显然不起作用并抛出“owl carousel不是函数”,因为它在初始加载时不在DOM中.我需要以某种方式将轮播应用于来自数据的div.

我找到了一些相关的答案,但它们不符合我的情况：

Load dynamic content in Owl Carousel 2

How to re-render a owl-carousel item?

他们看起来像是在重写DOM,但在我正在做的事情中没有意义.

如何将一个猫头鹰轮播放在来自ajax调用的HTML内的div上？

编辑12/10/2018完整样本：

jQuery(function ($) {
    $('#link').on('click', function (e) {
        e.preventDefault();
        let url = $(this).attr('href');
            $.ajax({
                url: url,
            }).done(function (data) {
                $('#content').html(data);
                $('#carousel-section').addClass("owl-carousel");
                setTimeout(function() {
                    $('#carousel-section').owlCarousel({
                        items:1,
                        slideBy: 1,
                        stagePadding: 0,
                        nav: true,
                        dots: false,
                    });
                },1000)
            }).fail(function (err) {
                console.log('ajax err back', err);
            });
        return false;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<div id="content"></div>
<a id="link" href="http://silly-stallman-3e4b6f.netlify.com/index.html">cclick</a>

我无法在DIV idk中填充HTML,为什么它不起作用,但这是我正在做的例子 – 获取静态HTML(http://silly-stallman-3e4b6f.netlify.com/index.html)并将其放入ajax调用,用它填充页面然后需要以某种方式将猫头鹰轮播定位到动态HTML.我该怎么做呢？

解决方法:

我以前遇到过这个问题.我最终解决了ajax以异步方式运行.
你可能会尝试这样的事情.希望它会给你一些想法.

jQuery(function ($) {
    $('.entry-content').addClass('entry-content--quiz')
    $('.get-questions').on('click', function (e) {
        e.preventDefault();
        let url = $(this).attr('href');
        let result = undefined;
        
        $.ajaxSetup({ async: false });
        $.ajax({
            url: url,
        }).done(function (data) {
            result = data;
        }).fail(function (err) {
            console.log('ajax err back', err);
        });
        $.ajaxSetup({ async: true });
        
        // Check if result is assigned
        if (result) {
          $('.entry-content').html(result);
          $('#wpvq-page-0').addClass("owl-carousel");
          $('#wpvq-page-0').owlCarousel({
              items:1,
              slideBy: 1,
              stagePadding: 0,
              nav: true,
              dots: false,
          });   
        }
     
        return false;
    });
});