我需要将 Owl Carousel 及其所有 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 is not a function”,因为它在初始加载时不在 DOM 中。我需要以某种方式将轮播应用到来自 data
的 div。
我找到了一些相关的答案,但它们不在我的情况下:
Load dynamic content in Owl Carousel 2
How to re-render a owl-carousel item?
他们看起来像是重写了 DOM,但在我正在做的事情的上下文中没有意义。
如何将 Owl Carousel 放在来自 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>
我无法将 HTML 填充到 DIV idk 中,为什么它不起作用,但这是我正在做的事情的示例 - 获取静态 HTML ( http://silly-stallman-3e4b6f.netlify.com/index.html) 并将其放入 ajax 调用中,用它填充页面然后需要以某种方式将 Owl Carousel 定位到动态 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;
});
});
关于javascript - 通过 ajax 调用在动态 HTML 上应用 Owl Carousel ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53675926/