猫头鹰旋转木马，ajax加载

Question

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

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

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

根据Owl文档，和类似的帖子在这里(如何在ajax调用后重新初始化Owl Carousel)我需要销毁，然后重新启动Carousel。当附加到一个独立的点击时，这是完美的。

$(".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();
    });
});