Magnific Popup中Ajax加载内容的JavaScript功能失效排查

作为JavaScript新手，我遇到以下问题：
在main_item_detail页面点击“item detail”按钮，通过Magnific Popup打开商品详情弹窗，弹窗内的display_item容器通过Ajax从popup_item.php加载带Swiper滑块的商品图片内容。但弹窗打开后，Swiper滑块无法滑动、无交互，仅CSS样式正常，浏览器控制台无报错。

相关代码 #

按钮触发代码：

<div class="product-action">
    <a href="#" class="btn-product btn-quickview1" onclick="init_popup(<?php echo $row["product_id"]; ?>, event)"
    title="view item">item detail</a>
</div>

弹窗结构代码：

<!-- Start of Quick View -->
<div class="product product-single product-popup" id="popup_detail_<?php echo $row["product_id"]; ?>" >

    <div class="text-right">
            <input class="form-control" type="hidden" id="item_id" name="item_id" value="<?php echo $row[0];?>"/>
            <button type="button" class="btn btn-sm btn-outline-light" onclick="_prev_id(<?php echo $row["product_id"]; ?>, event);" title="Produkti paraprak"><i class="fas fa-arrow-left"></i></button>
            <button type="button" class="btn btn-sm btn-outline-light btn-next-product" onclick="_next_id(<?php echo $row["product_id"]; ?>, event);" title="Produkti i radhes"><i class="fas fa-arrow-right"></i></button>
    </div>
        
    <div class="row gutter-lg" id="display_item">
    
    </div>
    
    
</div>
<!-- End of Quick view -->

Ajax加载函数：

function init_popup(product_id, e)
{
    e.preventDefault();
    $.ajax({
        url:"popup_item.php",
        method:"POST",
        data:{product_id:product_id},
        success:function(data)
        {
            $('#display_item').html(data);
        //  document.querySelector('#display_item').innerHTML = data; // returns same content
            document.getElementById("item_id").value = product_id;
        }
    });
}

popup_item.php代码：

<div class="col-md-6 mb-4 mb-md-0">
<div class="product-gallery product-gallery-sticky">
    <div class="swiper-container product-single-swiper swiper-theme nav-inner">
        <div class="swiper-wrapper row cols-1 gutter-no">
            <?php
                for ($i = 0; $i < count($images)-1; $i++)
                {
                    ?>
                        <div class="swiper-slide">
                            <figure class="product-image">
                                <img src="../images/images/gallery/preview/<?php echo trim($images[$i]); ?>"
                                    data-zoom-image="../images/images/gallery/original/<?php echo trim($images[$i]); ?>"
                                    alt="Water Boil Black Utensil" width="800" height="900">
                            </figure>
                        </div>
                    <?php
                }
            ?>
            
        </div>
        <button class="swiper-button-next"></button>
        <button class="swiper-button-prev"></button>
    </div>
    <div class="product-thumbs-wrap swiper-container" data-swiper-options="{
        'navigation': {
            'nextEl': '.swiper-button-next',
            'prevEl': '.swiper-button-prev'
        }
    }">
        <div class="product-thumbs swiper-wrapper row cols-4 gutter-sm">
            <?php
                for ($i = 0; $i < count($images)-1; $i++)
                {
                    ?>
                        
                        <div class="product-thumb swiper-slide">
                            <img src="../images/images/gallery/preview/<?php echo trim($images[$i]); ?>" alt="Product Thumb" width="103"
                                height="116">
                        </div>
                        
                    <?php
                }
            ?>
        </div>  
        <button class="swiper-button-next"></button>
        <button class="swiper-button-prev"></button>
    </div>
</div>
</div>

核心原因 #

Swiper需要在DOM元素完全加载后才能初始化，Ajax动态插入的HTML不会自动触发Swiper的初始化流程，导致滑块仅渲染样式但无交互功能。

修复步骤 #

1. 在Ajax回调中手动初始化Swiper
   修改init_popup函数，在HTML加载完成后分别初始化主滑块和缩略图滑块，注意指定专属选择器避免冲突：

   function init_popup(product_id, e)
   {
       e.preventDefault();
       $.ajax({
           url:"popup_item.php",
           method:"POST",
           data:{product_id:product_id},
           success:function(data)
           {
               $('#display_item').html(data);
               document.getElementById("item_id").value = product_id;
   
               // 初始化主商品图滑块
               new Swiper('.product-single-swiper', {
                   navigation: {
                       nextEl: '.product-single-swiper .swiper-button-next',
                       prevEl: '.product-single-swiper .swiper-button-prev',
                   },
                   // 可按需添加loop、zoom等配置
               });
   
               // 初始化缩略图滑块
               new Swiper('.product-thumbs-wrap', {
                   slidesPerView: 4,
                   spaceBetween: 10,
                   navigation: {
                       nextEl: '.product-thumbs-wrap .swiper-button-next',
                       prevEl: '.product-thumbs-wrap .swiper-button-prev',
                   },
                   // 可选：关联主滑块实现同步切换
                   thumbs: {
                       swiper: document.querySelector('.product-single-swiper')
                   }
               });
           }
       });
   }
   

2. 移除popup_item.php中的自动配置
   删除product-thumbs-wrap上的data-swiper-options属性，避免和JS初始化的配置冲突：

   <!-- 修改前 -->
   <div class="product-thumbs-wrap swiper-container" data-swiper-options="{...}">
   
   <!-- 修改后 -->
   <div class="product-thumbs-wrap swiper-container">
   

3. 避免重复初始化（可选）
   如果多次打开弹窗，可能会创建重复的Swiper实例导致异常，可在初始化前销毁旧实例：

   // 全局存储实例
   let mainSwiper = null;
   let thumbSwiper = null;
   
   function init_popup(product_id, e)
   {
       e.preventDefault();
       $.ajax({
           url:"popup_item.php",
           method:"POST",
           data:{product_id:product_id},
           success:function(data)
           {
               $('#display_item').html(data);
               document.getElementById("item_id").value = product_id;
   
               // 销毁旧实例
               if(mainSwiper) mainSwiper.destroy(true, true);
               if(thumbSwiper) thumbSwiper.destroy(true, true);
   
               // 重新初始化
               mainSwiper = new Swiper('.product-single-swiper', { /* 配置 */ });
               thumbSwiper = new Swiper('.product-thumbs-wrap', { /* 配置 */ });
           }
       });
   }
   

4. 验证Swiper依赖加载
   确保页面已正确引入Swiper的CSS和JS文件：

   <!-- 页面头部引入CSS -->
   <link rel="stylesheet" href="path/to/swiper-bundle.min.css">
   <!-- 页面底部引入JS -->
   <script src="path/to/swiper-bundle.min.js"></script>
   

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