單擊未檢測到Magnific Popup中的動態添加元素。嘗試導航到ajax畫廊中當前項目的單擊下一個項目

Question

我正在創建一個圖像庫，其中全尺寸圖像顯示在Lightbox中。燈箱的內容是來自外部文件的ajax加載的HTML。我爲此行爲使用Magnific Popup腳本。我試圖通過直接在燈箱中顯示的當前圖像上單擊任意位置來導航到下一個圖庫圖像。問題是我沒有能夠檢測到點擊事件，雖然它明顯插入到DOM中。

主視圖：main.html

<div class="gallery"> 
    <a href="gallery.php?photo=image-1.jpg">thumb-1.jpg</a> 
    <a href="gallery.php?photo=image-2.jpg">thumb-2.jpg</a> 
    <a href="gallery.php?photo=image-3.jpg">thumb-3.jpg</a> 
</div> 

燈箱內容：gallery.php

<?php echo '<img class="item" src="img/' . $_GET['photo'] . '" >'; ?> 

的jQuery：

$('.gallery').each(function() { 
    $(this).magnificPopup({ 
     delegate: 'a', 
     type: 'ajax', 
     gallery: { 
      enabled: true, 
      navigateByImgClick: true 
     } 
    }); 
}); 

雖然我沒有看到navigateByImgClick選項記錄，它似乎打算設置的東西，使點擊當前圖庫項目將帶你到下一個畫廊項目。但是，至少在我的測試中，這似乎不適用於ajax畫廊（當type設置爲ajax）。所以我做了什麼添加一個片段，看是否被檢測到的單擊事件：

$('.item').on('click', function() { 
    alert('click detected'); 
}); 

.item是畫廊項目的選擇。但是，點擊從未被檢測到（點擊時不會顯示警報）。

首先，爲什麼檢測不到點擊？

二，如何設置Magnific Popup在使用ajax圖庫時加載下一個圖庫項目？

Answer 1

想通了。需要將.mfp-img類分配給圖像。現在它可以工作。這可以通過該部分的大型彈出源來發現：

if(gSt.navigateByImgClick) { 
    mfp.wrap.on('click'+ns, '.mfp-img', function() { 
     if(mfp.items.length > 1) { 
      mfp.next(); 
      return false; 
     } 
    }); 
}