weixin_33709219 2016-08-12 14:38 采纳率: 0%
浏览 35

猫头鹰传送带,ajax负载

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

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

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

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

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.

Thanks.

  • 写回答

1条回答 默认 最新

  • weixin_33699914 2016-08-12 14:43
    关注

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

    报告相同问题?

    悬赏问题

    • ¥15 java连接sqlserver有问题
    • ¥15 yolov8 如何调cfg参数
    • ¥15 这个四人抢答器代码哪儿有问题?仿真程序怎么写?
    • ¥15 burpsuite密码爆破
    • ¥15 关于#ubuntu#的问题,如何解决?(相关搜索:移动硬盘)
    • ¥15 scikit安装之后import不了
    • ¥15 Ros2编译一个使用opencv的c++节点的时候,报了这个错误,请问怎么解决啊
    • ¥15 人脸识别相关算法 YOLO,AI等
    • ¥15 spark问题方便加V17675797079
    • ¥15 Python代码不打印的原因