javascript - WordPress AJAX 后加载后触发 Flexslider

Question

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

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

    });

});