将magnificPopup与动态元素一起使用

我有两张照片，都有“foto”类。 在每张照片下，我添加了一个按钮，允许我删除照片。

但是，我仍然可以在从DOM中删除照片后打开照片，而不是像预期的那样拍摄1张照片中的1张，我仍然在右下方有2张照片，我仍然可以在magnificPopup的galery中看到已删除的照片。 它还在缓存中吗？

$(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') + ' · image source'; } }, 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 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') + ' · image source'; } }, 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. */ }); 

Answer 2

我找到了解决方案。 我将事件监听器添加到一个函数中，然后我只需要在需要重新初始化时调用此函数。

 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') + ' · image source'; } }, 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() 。 这样可行 ：）