猫头鹰轮播，ajax加载

Question

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

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

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

根据 Owl 文档和此处的类似帖子 (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加载方法的回调参数来初始化轮播。

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