猫头鹰传送带，ajax负载 [英] owl carousel, ajax load

问题描述

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

I'm creating a page that loads external content via ajax.

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

这可行，但是外部文件中的内容包含一个猫头鹰轮播"，该猫头鹰会显示在已加载的html中，但不会(重新)初始化.

This works but the content in the external files contain a Owl Carousel, which appear in the loaded html, but do not (re)initialise.

根据Owl文档以及此处的simialr帖子(如何在ajax调用后重新初始化Owl Carousel )我需要销毁然后重新启动轮播. 将其附加到独立点击时，效果很好.

According to the Owl docs, and the simialr post here (How to reinitialize Owl Carousel after ajax call) I need to destroy and then reinitiate the carousel. This works perfectly when attached to an independant click.

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

但是一旦ajax文件加载完成，我需要在没有额外单击的情况下进行此操作.我尝试了以下所有方法，但都没有运气.

but I need this to happen without an additional click once the ajax file has loaded. I have tried all of the following methods with no luck.

// 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();
});

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

Any help or suggestions would be massively appreciated.

谢谢.

推荐答案

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

You should be able to initialize the carousel using the callback parameter of the jquery load method.

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

这篇关于猫头鹰传送带，ajax负载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！