jquery JavaScript无法处理 AJAX 加载的内容,在放大的弹出窗口中

dgsult0t  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(112)
<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>

字符串
我是JavaScript的新手,但还不能让它工作。我有这个main_item_detail文件,在这个文件里面我有一个项目滑块,显示所选项目的一些图像,所以当用户点击特定的“项目详细信息”按钮时,它会打开快速查看与所选项目详细信息的放大弹出窗口。

<!-- 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 加载内容的弹出窗口加载到“display_item”div中的函数。

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>


问题出在JavaScript功能上。当弹出窗口打开时,它应该能够通过滑动和选择一个项目来导航滑动滑动项目,还有其他功能,但它只是保持冻结,在JavaScript中没有功能,只有项目细节(CSS脚本加载良好)。我检查了控制台,但输出中没有报告错误。

  • 谢谢-谢谢
wtlkbnrh

wtlkbnrh1#

尝试调用swiper.update()方法https://swiperjs.com/swiper-api#methods--properties。或者为每个Swiper HTML结构创建一个唯一的ID。然后在加载 AJAX init Swiper之后。https://swiperjs.com/swiper-api#initialize-swiper

相关问题