올빼미 회전 목마, 아약스로드

Question

아약스를 통해 외부 콘텐츠를로드하는 페이지를 만들고 있습니다.

$(".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로드 메소드의 콜백 매개 변수를 사용하여 캐 러셀을 초기화 할 수 있어야합니다.

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