TypeError: $(...).magnificPopup 不是函数答案

【问题标题】：TypeError: $(...).magnificPopup is not a functionTypeError: $(...).magnificPopup 不是函数
【发布时间】：2017-03-06 05:25:47
【问题描述】：

我使用的是 chrome 开发者版。该库未加载，我不知道为什么。 chrome控制台报错。这是我的代码：

<ul><li><a class="mediaimage-link" href="~/img/HP/mediakit/The-CorPath-Vascular-Robotic-System_HR.jpg"><img src="~/img/HP/The-CorPath-Vascular Robotic-System-187.jpg" alt="">
</a></li>
<li><a href="https://www.youtube.com/watch?v=TnQsToiKKgw?rel=0&amp;showinfo=0" class="popup-youtube"> <img src="~/img/HP/Iyer-Video-187.jpg" alt=""></a>
         </li>
</ul>

$(document).ready(function() {
  //Media Image Popup
  $('.mediaimage-link').magnificPopup({type:'image'});
  //Video Iframe Popup
    $('.popup-youtube').magnificPopup({
          disableOn: 700,
          type: 'iframe',
          mainClass: 'mfp-fade',
          removalDelay: 160,
          preloader: false,
          fixedContentPos: false
        });
});`

【问题讨论】：

添加jquery文件
jsfiddle.net/t5f5e5zw/52

标签： javascript html magnific-popup

【解决方案1】：

您的代码中可能没有包含 JQuery 库。请记住，JQuery 文件必须放在所有其他 Javascript 代码之上。

【讨论】：

【解决方案2】：

$(document).ready(function ($) {
    $('.test-popup-link').magnificPopup({
    type: 'image',
    gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
          }
    // other options
  });
  });

只需在$(document).ready(function ($) 中传递 $ 它将开始工作

【讨论】：

你能解释一下为什么这样有效吗？我以前从来不需要将“$”传递给$(function() { })。老实说，我很生气，由于某种原因，这个库以前不需要这样做。

【解决方案3】：

我今天遇到了完全相同的问题：magnificPopup 几周以来一直运行良好。突然我得到了同样的“magnificPopup 不是函数”错误。

将 $ 添加到行 (document).ready(function ($) { 为我解决了这个问题，但我仍然想知道为什么（就像上面的 Rick）。

即使https://dimsemenov.com/plugins/magnific-popup/documentation.html 的文档仍然说，调用是这样的：

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

【讨论】：