Question

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

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

这样可行，但外部文件中的内容包含一个猫头鹰轮播，它出现在加载的html中，但不会（重新）初始化。

根据猫头鹰文档和此处的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加载方法的callback参数初始化轮播。

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

猫头鹰旋转木马，ajax负载

1 个答案: