jquery - Owl Carousel ，ajax加载

Question

我正在创建一个通过 ajax 加载外部内容的页面。

$(".link").click(function(e) {
    e.preventDefault()
    $("#ajax-container")load("external-file.php");
});

这可行，但外部文件中的内容包含 Owl Carousel，它出现在加载的 html 中，但不会(重新)初始化。

根据 Owl 文档和此处的 simialr 帖子 ( How to reinitialize Owl Carousel after ajax call )，我需要销毁然后重新启动轮播。当附加到独立点击时，此功能非常有效。

$(".button").click(function(e){
    e.preventDefault()
    $("#carousel").data('owlCarousel').destroy();
    $("#carousel").owlCarousel();
});

但我需要在 ajax 文件加载后无需额外单击即可实现此操作。我已经尝试了以下所有方法，但没有成功。

// adding to original
$(".link").click(function(e){
    e.preventDefault()
    $("#ajax-container")load("external-file.php");
    $("#carousel").data('owlCarousel').destroy();
    $("#carousel").owlCarousel();
});

// in addition to original
$(".link-second-classname").click(function(e) {
    e.preventDefault()
    $("#carousel").data('owlCarousel').destroy();
    $("#carousel").owlCarousel();
});

// ajaxComplete
$(document).ajaxComplete(function(e){
    e.preventDefault()
    $("#carousel").data('owlCarousel').destroy();
    $("#carousel").owlCarousel();
});

// ajaxSuccess
$(document).ajaxSuccess(function(e){
    e.preventDefault()
    $("#carousel").data('owlCarousel').destroy();
    $("#carousel").owlCarousel();
});

任何帮助或建议将不胜感激。

谢谢。

Answer 1

您应该能够使用 jquery load 方法的回调参数来初始化轮播。

$(".link").click(function(e) {
    e.preventDefault();
    $("#ajax-container").load("external-file.php", function() {
        $("#carousel").owlCarousel();
    });
});