Question

我正在开发一些wordpress项目，我的猫头鹰内容将通过ajax加载。现在，会发生什么，当我通过ajax加载内容时，它加载内容但不显示是滑块。这是我已经完成的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的通用函数。我希望你能理解。在这里你可以看到我重新加载了所有猫头鹰的javascript代码。在下面的代码中，我得到了ajax响应并附加在owl crousal div中。

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

Answer 1

你有点遗憾，它不仅需要下载脚本$.getScript(，还需要运行它以使用JS对新创建的元素产生影响。查看html页面中的所有函数调用（<script>和$( document ).ready(function() </script>，没有它，但是是carousel的函数），运行后AJAXA在Browser JS控制台中调用它，看它是否有效。另外在你的浏览器中看到js consle如果你运行Ajax之后没有错误，因为错误停止js脚本运行到位错误的地方

Answer 2

During ajax return 成功：在此处定义猫头鹰轮播。表示成功返回ajax后，在此处定义猫头鹰轮播。

success: function(data) {

                //Return ajax success response here

                jQuery('#cross_container').html(data);

                //run owl Carousel here 

                jQuery('.cross-sell-box').owlCarousel({
                    items: 3,
                    loop: true,
                    margin: 10,
                    autoplay: true,
                    autoplayTimeout: 1000,
                    autoplayHoverPause: true,
                    nav: true
                });

通过ajax加载数据时，猫头鹰crousal滑块无法正常工作

2 个答案: