применить карусель совы к динамическому HTML из вызова ajax

Question

Мне нужно применить совую карусель и весь ее CSS к динамическим элементам HTML, полученным при вызове ajax.

В настоящее время код выглядит следующим образом:

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;
    });
});

Это, очевидно, не работает и выдает "сова карусель не является функцией", потому что он не находится в DOM при начальной загрузке.Мне нужно как-то применить карусель к div, который приходит от data.

Я нашел несколько соответствующих ответов, но они не в контексте моей ситуации:

Загрузка динамического содержимого в Owl Carousel 2

Как перерисовать элемент сова-карусель?

Они выглядят так, как будто они переписывают DOM, но это не имеет смысла в контексте того, что я делаю.

Как поместить совую карусель в div внутри HTML, который поступает от вызова ajax?

РЕДАКТИРОВАТЬ 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>

Я не могу заставить HTML заполнить внутри DIV IDK, почему он не работает, но это пример того, что я делаю - получатьстатический HTML (http://silly -stallman-3e4b6f.netlify.com / index.html ) и помещение его в вызов ajax, заполнение им страницы и необходимость каким-то образом нацеливать карусель совы в динамический HTML,Как мне это сделать?

Answer 1

Я попытался добавить сову-карусель динамически, и, похоже, она работает нормально.Можете ли вы взглянуть на приведенный ниже код и проверить, может ли это быть полезным для вашего варианта использования.

jQuery(function ($) {
            $('#link').on('click', function (e) {
                myReq.then( (res) =>{
                    res = res.map( item => `<div class='item'>${item}</div>`);
                    $('#content').html('<div id="carousel-section">'+res+'</div>');
                    $('#carousel-section').addClass("owl-carousel");
                    $('#carousel-section').owlCarousel({
                        items:1,
                        slideBy: 1,
                        stagePadding: 0,
                        nav: true,
                        dots: false,
                    });
                })
                .catch( (err) =>{
                    console.log('ajax err back', err);
                })
                return false;
            });
        });

        const myArray = [1, 2, 3, 4, 5];

        const myReq = new Promise( (resolve, reject) => {
            setTimeout( () => {
                resolve(myArray)
            }, 1000)
        })

.item {
    width: 300px;
    height: 300px;
    display: inline-flex;
    margin: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #009688;
}

 <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="#">Cclick</a>

Answer 2

Хорошо, я понял.Это было так:

Мне нужно было изменить

jQuery(function ($) {

на

$(function ($) {

Был какой-токонфликт продолжается.

Answer 3

Я сталкивался с этой проблемой раньше.Я в конечном итоге решить 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;
    });
});