Triggering Flexslider after WordPress AJAX post load

Question

I am loading posts via Ajax, and each post has a Flexslider(2) carousel, which isn't loading. I believe it may have to do with the timing of the post - the Flexslider script is running before the post loads, so it isn't triggered. I've tried a callback function and binding the Flexslider to the success call but can't get it to work. Is there an ideal way to do this?

(Flexslider runs fine on the page outside of the Ajax content.)

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

    });

Adding flexslider to the success callback 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
                    });
                }
            });

        });

    });

Answer 1

The solution was to add the flexslider function into the Ajax success call as another function:

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

    });

});