使用帶動態元素的magnificpopup

Question

我有兩張照片，都有類「foto」。在每張照片下方，我添加了一個可以刪除照片的按鈕。

但是，我仍然可以在刪除DOM中的照片後打開照片，而不是預期的1張照片中的1張，我仍然會在右下角顯示2中的1，我仍然可以看到已刪除的照片在magnificPopup的匆忙之中。它仍在緩存中嗎？

$(document).ready 
(
    function() 
    { 
     $('.foto').magnificPopup 
     (
      { 
       type: 'image', 
       closeOnContentClick: false, 
       closeBtnInside: false, 
       mainClass: 'mfp-with-zoom mfp-img-mobile', 
       image: 
       { 
        verticalFit: true, 
        titleSrc: function(item) 
        { 
         return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
        } 
       }, 
       gallery: 
       { 
        enabled: true 
       }, 
       zoom: 
       { 
        enabled: true, 
        duration: 300, // don't foget to change the duration also in CSS 
        opener: function(element) 
        { 
         return element.find('img'); 
        } 
       } 
      } 
     ); 
    } 
); 

是否magnificPopup與動態元素不兼容？有沒有一種方法可以在不重新加載整個頁面的情況下重新初始化函數？

Answer 1

我找到了解決方案。我將事件監聽器添加到一個函數中，然後當我需要重新初始化時，隨時調用此函數。

function init_magnificPopup() 
{ 
     $('.foto').magnificPopup 
     (
      { 
       type: 'image', 
       closeOnContentClick: false, 
       closeBtnInside: false, 
       mainClass: 'mfp-with-zoom mfp-img-mobile', 
       image: 
       { 
        verticalFit: true, 
        titleSrc: function(item) 
        { 
         return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
        } 
       }, 
       gallery: 
       { 
        enabled: true 
       }, 
       zoom: 
       { 
        enabled: true, 
        duration: 300, // don't foget to change the duration also in CSS 
        opener: function(element) 
        { 
         return element.find('img'); 
        } 
       } 
      } 
     ); 
} 

$(document).ready 
(
    function() 
    { 
     init_magnificPopup(); 
    } 
); 

所以我只是打電話init_magnificPopup()在我的刪除功能的結束。該工程:)

Answer 2

試試這個;）

function initMagnificPopup(){ 
    $('.foto').magnificPopup({ 
     type: 'image', 
     closeOnContentClick: false, 
     closeBtnInside: false, 
     mainClass: 'mfp-with-zoom mfp-img-mobile', 
     image: { 
      verticalFit: true, 
      titleSrc: function(item) { 
       return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
      } 
     }, 
     gallery: { 
      enabled: true 
     }, 
     zoom: { 
      enabled: true, 
      duration: 300, // don't foget to change the duration also in CSS 
      opener: function(element) { 
       return element.find('img'); 
      } 
     } 
    }); 
} 

$(function(){ 
    initMagnificPopup(); 
    /* add call this function whenever you delete an image. */ 
});