javascript - 通过 ajax 加载数据时，Owl 轮播 slider 不起作用

Question

我正在开发一些 wordpress 项目，我的 owl 内容将通过 ajax 加载。现在，发生了什么，当我通过 ajax 加载内容时，它加载内容但不显示 slider 。这是我已经完成的 JavaScript 代码:

function runAjax(objects){
var $response;
$.ajax({
    url:wpAjaxUrl,
    async:false,
    cache:false,
    type:"POST",
    //data:{'action':objects.action,'product_id':objects.product_id},
    data:objects,
    dataType:"json",
    beforeSend:function(){
        $(".loader_div").show();
    },
    success:function(response){


        $response=response;
        //console.log($response.subcategory_products);
    },
    complete:function(response){
        if(objects.action=='get_product_images'){
            // var owl1=$("#owl-related-accessories");
            // owl1.data('owlCarousel').reinit();
            $.getScript("http://localhost/inox/wp-content/themes/inox/js/jquery.min.js");
            $.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel.js");
            $.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel-related-accessories.js");
            $.getScript("http://localhost/inox/wp-content/themes/inox/js/owl.js");
        }
        $(".loader_div").hide();
    }
});
return $response;

}

由于ajax请求非常多，所以我创建了一个通用的ajax请求函数，希望大家能够理解。在这里你可以看到我已经重新加载了 owl 的所有 javascript 代码。在下面的代码中我得到了 ajax 响应并附加到 owl crousal div 中。

$("#owl-related-accessories").html($ajaxRes.relatedHtmlData);

Answer 1

你忽略了，它不仅需要下载脚本$.getScript(还需要运行它才能对用 JS 创建的新元素生效。查看 html 页面中所有函数的调用( <script> 与 $( document ).ready(function() </script> 和没有它，但是轮播的函数)，并在运行 AJAXA 后在浏览器 JS 控制台中调用所有函数，看看它是否有效。另请在浏览器 js 控制台中查看运行 Ajax 后是否没有错误，因为错误会在发生错误的地方停止 js 脚本运行