带有 ajax 的 magnific-popup；无法获得关闭按钮或下一个/上一个工作

问题描述

我有一个基本网站，当我在弹出窗口中使用图像时，magnific-popup 会在其中工作。我一使用 ajax，就会出现文本，但没有关闭按钮和导航箭头。

这是我的 html：

<div class="container mt-4 pt-3">
   <div class="portfolioContainer row">
        <div class="col-lg-3 col-md-6 p-0 apps">
             <div class="portfolio-Box position-relative overflow-hidden mt-0 mb-0">                                
                  <a class="mfp-ajax-holder" href="stories/wvu.html">
                  <div class="work-img position-relative overflow-hidden">
                     <img src="images/stories/wvulogo.jpg" class="img-fluid" alt="work-image">
                     <div class="work-detail">
                          <div class="content">
                            <h5 class="text-light title mb-0">West Virginia University</h5>
                            <small class="text-light">Mike</small>
                          </div>
                     </div>
                 </div>  
               </a>                              
           </div>
        </div><!--end col-->

这是加载的 wvu.html 文件：

<div id="wvu" class="ajax-content white-shadow">
    <h1 class="test"><img src="images/quote-left.png"></h1>
    <p>Sample test here</p>
</div>

这里是我初始化我的 magnific-popup 的地方：

$('.mfp-ajax-holder').magnificPopup({
    type: 'ajax',// cloSEOnContentClick: false,showCloseBtn: true,mainClass: 'mfp-fade',tLoading: 'Loading image #%curr%...',gallery: {
        enabled: true
        // navigateByImgClick: true,// preload: [0,1]
    },zoom: {
        enabled: true
    },callbacks: {
        ajaxContentAdded: function() {
            var m = this;
            this.content.find('.close').on('click',function(e) {
                e.preventDefault();
                m.close();
            });
        }
    }
});

如果我用图像替换 ajax html，事情加载正常，我会看到关闭和导航按钮。因此，它必须与使用ajax有关。任何提示都会很棒。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajax jquery magnific-popup