如何防止Slick插件删除事件侦听器

Question

这是我真实的光滑画廊，我添加了一个“点击”按钮。 ＆＃34;？＆＃34;上的事件监听器按钮...但是当图库达到断点时，光滑将删除所有事件监听器...我该如何防止它？

StandardCharsets

Answer 1

我遇到了同样的问题，并通过对slick.js中cleanUpRows函数的小调整来修复它。

Slick.prototype.cleanUpRows = function() {
    var _ = this, originalSlides;

    if(_.options.rows > 1) {
        originalSlides = _.$slides.children().children().clone(true);
        originalSlides.removeAttr('style');
        _.$slider.empty().append(originalSlides);
    }

};

只需添加“.clone（true）”。 这会将eventlisteners复制到originalSlides。

当一个响应中断被击中时，这解决了Slick的问题。

Answer 2

克隆的问题在于，它仅保留与jquery相关的处理程序，而不会保留诸如香草js事件和对代码中可能存在的旧节点的引用之类的内容。为了保留所有这些，我们要避免克隆元素并且避免使用empty() jquery函数来删除所有jquery处理程序，因此一种解决方案是使用简单的innerHTML清空内容来替换此函数：

Slick.prototype.cleanUpRows = function() {
    var _ = this, originalSlides;

    if(_.options.rows > 1) {
        originalSlides = _.$slides.children().children().clone(true);
        originalSlides.removeAttr('style');
        _.$slider.get(0).innerHTML = '';
        _.$slider.append(originalSlides);
    }

};

或使用documentFragment：

Slick.prototype.cleanUpRows = function() {

    var _ = this, originalSlides;

    if(_.options.rows > 0) {
        originalSlides = _.$slides.children().children()
        originalSlides.removeAttr('style');

        var fragment = document.createDocumentFragment();
        _.$slides.children().each(function(i, element) {
            while(element.firstChild) {
                fragment.appendChild(element.firstChild);
            }
            element.parentNode.replaceChild(fragment, element);
        })
    }

};