Javascript 单击此锚定以生成弹出窗口-放大弹出窗口js

我在页面上有多个带有data属性的元素

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> 

但我也通过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"]');

我正在选择页面上的所有这些元素，而我认为我应该做的是利用

$（这）

，但似乎无法让它工作

日志对象

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]

---

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

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

.pages

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

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

更多信息

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