如何在重新初始化之前销毁 JQuery 插件实例？ （照片刷卡）

Question

Photoswipe 是一个 Vanilla JavaScript 灯箱库。我正在使用 JQuery-fies Photoswipe 的简单插件。一切正常，除了当我将新元素动态加载到画廊并重新启动 Photoswipe 插件时，它开始搞砸了，即没有正确关闭灯箱覆盖。

只需执行 $(element).photoswipe(); 即可调用该插件。所以我在第一次加载元素 div 时调用它一次，然后在添加新元素时再次调用它。我已将问题确定为重新启动，但删除了第一个 Photoswipe 插件调用并在添加新元素后仅调用一次，这样一切正常。

我认为错误出在下面的初始化函数中：如果我们可以检查 Photoswipe 的现有实例并在创建数组之前将其杀死，应该可以解决问题。或者我们可以简单地从内存中清除 $(element).photoswipe(); 的所有内容吗？创建。这就是我被困的地方。

这是我正在使用的 JQuery Photoswipe 插件：

(function($) {
$.fn.photoswipe = function(options){
    var galleries = [],
        _options = options;

    var init = function($this){
        galleries = [];
        $this.each(function(i, gallery){
            galleries.push({
                id: i,
                items: []
            });

            $(gallery).find('a').each(function(k, link) {
                var $link = $(link),
                    size = $link.data('size').split('x');
                if (size.length != 2){
                    throw SyntaxError("Missing data-size attribute.");
                }
                if ($(gallery).data('month')) {
                    $link.data('gallery-id',$(gallery).data('month'));
                } else {
                    $link.data('gallery-id',i+1);
                }

                $link.data('photo-id', k);

                var item = {
                    src: link.href,
                    msrc: link.children[0].getAttribute('src'),
                    w: parseInt(size[0],10),
                    h: parseInt(size[1],10),
                    title: $link.data('title'),
                    author: $link.data('author'),
                    el: link
                }

                galleries[i].items.push(item);

            });

            $(gallery).on('click', 'a', function(e){
                e.preventDefault();
                var gid = $(this).data('gallery-id'),
                    pid = $(this).data('photo-id');
                openGallery(gid,pid);
            });
        });
    }

    var openGallery = function(gid,pid){
        var pswpElement = document.querySelectorAll('.pswp')[0],
            items = galleries[gid-1].items,
            options = {
                history:false,
                index: pid,
                addCaptionHTMLFn: function(item, captionEl, isFake) {
                    if(!item.title) {
                        captionEl.children[0].innerText = '';
                        return false;
                    }
                    captionEl.children[0].innerHTML = item.title + '<br/><small>' + item.author + '</small>';
                    return true;
                },
                showHideOpacity: true
            };
        $.extend(options,_options);
        var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    }

    // initialize
    init(this);

    return this;
};
}( jQuery ));

Answer 1

我想通了。

每次打开照片模式时，Photoswipe 都会加载完整的项目数组。所以当添加新元素时需要做的是使用 JavaScript 的数组推送将新项目追加到数组中。

Answer 2

对我有用的（我正在使用无限滚动来加载新元素）是调用这个：

$(gallery).off('click', 'a');

添加新元素之后和调用之前：

$(element).photoswipe();