在WordPress AJAX后加载后触发Flexslider

时间:2017-02-17 12:26:13

标签: javascript jquery ajax wordpress

我正在通过Ajax加载帖子,每个帖子都有一个Flexslider(2)轮播,没有加载。我相信这可能与帖子的时间有关 - Flexslider脚本在帖子加载之前运行,因此它不会被触发。我尝试了一个回调函数并将Flexslider绑定到成功调用但无法使其工作。有理想的方法吗?

(Flexslider在Ajax内容之外的页面上运行良好。)

 jQuery(document).ready(function ($) {

        $(".events_link").click(function () {
            var eventname = $(this).attr('id');
            var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
            jQuery.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {
                    action: "all_event",
                    eventname: eventname
                },
                success: function (response) {
                    $(".events-thumbs").html(response);
                }
            });

        });

        $('.flexslider').flexslider({
            animation: "slide",
            slideshow: "false",
            animationLoop: true,
            itemWidth: 192,
            itemMargin: 9,
            controlNav: true,
            directionNav: false
        });

    });

将flexslider添加到成功回调WORKED!

jQuery(document).ready(function ($) {

        $(".events_link").click(function () {
            var eventname = $(this).attr('id');
            var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
            jQuery.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {
                    action: "all_event",
                    eventname: eventname
                },
                success: function (response) {
                    $(".events-thumbs").html(response);
                    $('.flexslider').flexslider({
                        animation: "slide",
                        slideshow: "false",
                        animationLoop: true,
                        itemWidth: 192,
                        itemMargin: 9,
                        controlNav: true,
                        directionNav: false
                    });
                }
            });

        });

    });

1 个答案:

答案 0 :(得分:1)

解决方案是将flexslider函数作为另一个函数添加到Ajax成功调用中:

.sortable