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

Question

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

插件只需通过执行$（element）.photoswipe（）;来调用。所以我在首次加载元素div时调用它一次，然后在添加新元素时再调用它。我已经确定了重新启动的问题，但删除了第一个Photoswipe插件调用，并在添加新元素后调用它，并且一切正常。

我相信错误发生在下面的init函数中：如果我们可以检查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();