单击此锚点以生成弹出窗口- magnific popup js答案

【问题标题】：Clicking this anchor to generate popup - magnific popup js单击此锚点以生成弹出窗口- magnific popup js
【发布时间】：2016-04-11 12:52:43
【问题描述】：

我在页面上有多个具有数据属性的元素

data-lightbox="image"

HTML 看起来像

<div class="image isotope-item" id="image_72">
  <div class="work-item">
    <div class="dima-masonry-100"></div>
      <img src="/path/to/img" alt="Valley" />
      <div class="link_overlay">
        <ul class="icons-media">
          <li>
            <a data-lightbox="image" href="/path/to/img">
              <i class="fa fa-link"></i>
            </a>
         </li>
         <li>
           <a href="/images/72"><i class='fa fa-credit-card'></i></a>
         </li>
       </ul>
        <div class="work-info">
          <div class="work-title text-center">
            <p>Random Valley 3</p>
          </div>
        </div>
        <span class="topaz-hover"></span>
      </div>
    </div>
</div>  

<div class="image isotope-item ok-md-3 ok-xsd-6 ok-sd-6 PlacesOfInterest" id="image_71">
  <div class="work-item">
    <div class="dima-masonry-100"></div>
      <img src="/path/to/img" alt="Usk" />
        <div class="link_overlay">
          <ul class="icons-media">
            <li>
              <a data-lightbox="image" href="/path/to/img">
                <i class="fa fa-link"></i>
              </a>
            </li>
          <li>
            <a href="/images/71"><i class='fa fa-credit-card'></i></a>
          </li>
        </ul>
        <div class="work-info">
          <div class="work-title text-center">
            <p>Usk Valley 3</p>
          </div>
        </div>
        <span class="topaz-hover"></span>
      </div>
    </div>
</div>

所以我可以让宏伟的弹出窗口正常工作

// Portfolio Lightbox
$(function(){
  if($('body').hasClass('pages portfolio')){
    e.preventDefault();
    var i = $('[data-lightbox="image"]');
    i.magnificPopup({
     type: 'image',
     closeOnContentClick: !0,
     closeBtnInside: !1,
     fixedContentPos: !0,
     mainClass: "mfp-zoom-in",
     image: {
       verticalFit: !0
     }
  });
 }
});

但我也通过 AJAX 调用加载额外的图像，因此需要对动态创建的元素使用事件委托

所以我把代码改成了

// Portfolio Lightbox
$(function(){
  if($('body').hasClass('pages portfolio')){
    $(document).on('click', function(e) {
      e.preventDefault();
      var d = $('[data-lightbox="image"]');
      d.magnificPopup({
       type: 'image',
       closeOnContentClick: !0,
       closeBtnInside: !1,
       fixedContentPos: !0,
       mainClass: "mfp-zoom-in",
       image: {
         verticalFit: !0
       }
     });
   });
  }
});

我发现有时我必须单击链接两次才能触发事件。也可以使用

var d = $('[data-lightbox="image"]');

我正在选择页面上的所有这些元素，而我认为我应该做的是利用 $(this) 但似乎无法使其正常工作

记录对象

var d = $('[data-lightbox="image"]');
console.log(d);
[a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, prevObject: jQuery.fn.init[1], context: document, selector: "[data-lightbox="image"]"]

var d = $(this);
console.log(d);
[document, context: document]

【问题讨论】：

标签： javascript jquery magnific-popup

【解决方案1】：

如果您通过 ajax 加载图像，您可以使用一个委托事件处理程序。

例如，假设您的所有图像都加载到类 .pages 的 DOM 元素中

$(document).on('click', '.pages' , function(e) {
    //do stuff
})

在回调中，您可以访问事件对象和属性，例如 target 和 delegateTarget。

【讨论】：