WordPress AJAX post加载后触发Flexslider

Question

我正在通过Ajax加载帖子，每个帖子都有一个Flexslider(2) carousel，它没有加载。我认为这可能与post的时间有关- Flexslider脚本在post加载之前运行，所以它不会被触发。我尝试了一个回调函数，并将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成功了！

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

        });

    });

Answer 1

解决方案是将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
                });
            }
        });

    });

});