精彩弹出窗口：应用程序-3f3c3e8....js：15011未捕获类型错误：无法读取未定义的属性'open'

Question

我正在为画廊使用此示例：https：//codepen.io/dimsemenov/pen/zvlny

我的应用程序是Rails 5和Turbolinks 5. 我只会在生产中获得此错误，而不是开发。

当我单击打开画廊时，我会遇到错误：

Uncaught TypeError: Cannot read property 'open' of undefined

这是我的JS：

$(document).ready(function() {
  // image gallery lightbox
  $('.open-gallery-link').click(function(event) {
    //  event.preventDefault();
    var items = [];
    $($(this).attr('href')).find('.slide').each(function() {
      items.push( {
        src: $(this)
      } );
    });
    $.magnificPopup.open({
      items:items,
      gallery: {
        enabled: true
      },
      closeBtnInside: false
    });
  });

和我的html：

<a href="#gallery1" class="open-gallery-link">
  <div class="featured-img space-bottom-30" style="background-image: url(http://res.cloudinary.com/hdldnogif/image/upload/v1488230846/zk17kylcizbq9grz3eg8.jpg)">
 </div>
</a>

我尝试将JS包裹在$( document ).on('turbolinks:load', function() { }中，但会遇到相同的错误。任何帮助都将受到赞赏

Answer 1

我认为您正在使用旧语法。尝试以下操作：

$(document).on('turbolinks:load', {
  // your code here
});

Answer 2

也许会帮助某人！如果您确实缩小了JS代码，那么很可能有一个" MagnificPopup"的简短名称，它已缩短了'scripts.s.s.min.js'的名称，这就是为什么在这种情况下您找不到" Magnificopopup" - 未定义。

Answer 3

元素的选择器是错误的

 $.magnificPopup.open

。您的选择器应该是锚标签。尝试此尝试：

$('.open-gallery-link').magnificPopup.open({});