点击加载更多后模态框无法加载flexslider技术求助

尝试了多种方法，点击「加载更多」按钮后，仍无法在模态窗口中加载flexslider。清楚需要发起二次请求来调用脚本，但受限于技术水平，不知如何操作，恳请提供帮助。

相关代码 #

HTML/PHP 部分 #

<!-- Modal -->
<div class="modal" id="postModal<?php the_ID(); ?>" data-id="<?php the_ID(); ?>">
    <div class="modal-dialog modal-dialog-centered" style="max-width:70%">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="float:right;border:none;"></button>
            <div class="row-popup">
            <div class="col-popup-left">
                <?php $images = get_field('gallery');
                    if( $images ): ?>
            <div id="slider" class="flexslider">
                            <ul class="slides">
                    <?php foreach( $images as $image ): ?>
                            <li><img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" /></li>
                <?php endforeach; ?>
                            </ul>
            </div>
                    <?php endif; ?>
                </div>
        <div class="col-popup-right">
                  <h5 class="portfolio-title"><?php the_field('game-type')?></h5>
          <p class="portfolio-customer"><?php the_field('customer')?></p>
          <p class="portfolio-review"><?php the_field('review')?></p>
          <p class="portfolio-price"><?php the_field('quantity')?></p>
        </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- Modal -->

<?php if($args['layout'] == "1"){ ?>
<div class="am_grid_col" >
<div data-bs-toggle="modal" data-bs-target="#postModal<?php the_ID(); ?>" data-id="<?php the_ID(); ?>" class="am_single_grid"><div class="more-button"><p>show more</p></div>
<div class="am_thumb"><?php the_post_thumbnail('full'); ?></div>
<div class="am_cont">
    <h2 class="am__title"><?php echo get_the_title(); ?></h2></a>
    <div class="portfolio-price--grid"><?php the_field('quantity-and-price'); ?></div>
</div>
</div>
</div>
<?php } else if( $args['layout'] == 2 ){ ?>
<?php } ?>
<?php endwhile; ?>
</div>

JavaScript 部分 #

jQuery(document).ready(function ($) {
    $(".am-post-grid-load-more").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) {
                $(".am_grid_col").html(response);
                $('.flexslider').flexslider({
                  animation: "slide",
                  slideshow: "false",
                  animationLoop: true,
                  itemWidth: 192,
                  itemMargin: 9,
                  controlNav: true,
                  directionNav: false
                });
              }
          });
    });
});

解决方案 #

问题根源 #

1. 模态框初始处于隐藏状态，AJAX成功后直接初始化flexslider会导致插件无法正确计算元素尺寸，从而无法正常渲染。
2. 所有模态框内的滑块都使用了相同的id="slider"，违反HTML ID唯一性规则，导致选择器匹配错误。
3. 使用$(".am_grid_col").html(response)会覆盖已有内容，加载更多应该追加而非替换。

修改步骤 #

1. 修正滑块ID（HTML/PHP）

将模态框内的滑块ID改为动态唯一值，避免冲突：

<!-- 原代码 -->
<div id="slider" class="flexslider">
<!-- 修改后 -->
<div id="slider-<?php the_ID(); ?>" class="flexslider">

2. 调整JavaScript逻辑

移除AJAX成功后的直接初始化，改为监听模态框显示事件，在模态框即将显示时初始化对应滑块：

jQuery(document).ready(function ($) {
    // 加载更多按钮点击事件
    $(".am-post-grid-load-more").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) {
                // 用append追加新内容，而非替换原有内容
                $(".am_grid_col").append(response);
            }
        });
    });

    // 监听模态框显示事件，初始化对应滑块
    $(document).on('show.bs.modal', '.modal', function () {
        var modalId = $(this).attr('id');
        // 提取帖子ID
        var postId = modalId.replace('postModal', '');
        // 定位当前模态框内的滑块
        var $targetSlider = $('#slider-' + postId);

        // 销毁已存在的flexslider实例，避免重复初始化
        if ($targetSlider.data('flexslider')) {
            $targetSlider.data('flexslider').destroy();
        }

        // 初始化flexslider
        $targetSlider.flexslider({
            animation: "slide",
            slideshow: false, // 布尔值无需加引号
            animationLoop: true,
            itemWidth: 192,
            itemMargin: 9,
            controlNav: true,
            directionNav: false
        });
    });
});

说明 #

• 模态框的show.bs.modal事件会在模态框即将显示时触发，此时滑块元素已可见，flexslider能正确计算尺寸。
• 动态ID确保每个滑块唯一，避免选择器冲突。
• 使用append()替代html()，保留已加载的内容，符合加载更多的逻辑。

内容的提问来源于stack exchange，提问作者Artem