Magnific Popup: application-3f3c3e8….js:15011Uncaught TypeError: Cannot read property 'open' of unde

Posted 2023-05-07

【中文标题】Magnific Popup: application-3f3c3e8….js:15011Uncaught TypeError: Cannot read property \'open\' of undefined

【英文标题】：Magnific Popup: application-3f3c3e8….js:15011Uncaught TypeError: Cannot read property 'open' of undefinedMagnific Popup: application-3f3c3e8….js:15011Uncaught TypeError: Cannot read property 'open' of undefined

【发布时间】：2017-07-22 13:40:22

【问题描述】：

我将这个示例用于画廊：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() 中，但得到了同样的错误。任何帮助表示赞赏

【参考方案1】：

我认为您使用的是旧语法。试试这个：

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

【讨论】：

不幸的是，这不是有效的语法

【参考方案2】：

也许它会对某人有所帮助！ 如果你确实缩小了你的 JS 代码，那么很可能有一个“magnificPopup”的短名称，它在“scripts.min.js”中具有缩短的名称，这就是为什么在这种情况下你找不到“magnificPopup” - 它是未定义。

【参考方案3】：

你元素的选择器错误

 $.magnificPopup.open

。您的选择器应该是锚标记。试试这个：

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

【讨论】：

我认为这行不通。我现在收到此错误：$(...).magnificPopup.open is not a function 我认为只有在您的画廊嵌套在 $('.open-gallery-link') 元素内时才有效。在我的事业中，我试图通过单击单独的链接来启动画廊。

我认为这里需要注意的一件大事是我的代码在开发中运行良好，但在生产中却不行。感觉像是 Rails 或 Turbolinks 问题