jquery - nopCommerce 3.40 中的 "TypeError: $(...).magnificPopup is not a function"

Question

以下代码显示图片缩略图并附加一个 magnificPopup 事件。它还将图片嵌入图片中。

这一切在几天前都有效，但现在不知何故破坏了它，现在我得到的只是一个 js 类型错误。

我尝试摆弄jQuery.noConflict()，即使我没有添加任何新的库或更新旧的库，但这当然没有任何作用。我知道问题与 magnificPopup 有关，因为如果我只是从代码中删除脚本，一切都会再次正常工作。

我想我在某个地方犯了一个简单的错误，导致了这个问题，但我找不到任何东西，我已经看了一整天了。任何指示表示赞赏。

@model ProductDetailsModel
@using Nop.Core.Domain.Media
@using Nop.Core.Domain.Catalog;
@using Nop.Core.Infrastructure;
@using Nop.Web.Models.Catalog;
@{
   Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");
   Html.AddScriptParts("~/Scripts/jquery.magnific-popup.js");
}

...   

var backThumb = _pictureService.GetPictureUrl(lPictures[1], 100);
var backPic = _pictureService.GetPictureUrl(lPictures[1]);

<a class="thumb-popup-link" id="thumb-popup-link-back" title="@Model.PictureModels[0].Title">
    <img id="backThumb" alt="@Model.PictureModels[0].AlternateText" src="@backThumb" title="@Model.PictureModels[0].Title Back Thumb" />
</a>
<div id="backview" class="mfp-hide" style="position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);">
   <img id="backPic" src="@backPic" alt="@Model.PictureModels[0].AlternateText Back" />
   <div id="logoBox" style="position: absolute; top: 277px; width: 319px; left: 729px; height: 328px;">
       <img id="logoPic" src="/Themes/Motion/Content/img/logo.gif" alt="@Model.PictureModels[0].AlternateText Logo Box" title="logo" style="max-width: 320px; max-height: 330px; vertical-align: middle; position: absolute; top: 50%; left: 50%; margin-bottom: -50%; margin-right: -50%; transform: translate(-50%, -50%)" />
   </div>
</div>
<script type="text/javascript">
          $(document).ready(function () {
             $('#thumb-popup-link-front').magnificPopup({
                 items:
                 {
                     src: '#frontview',
                     closeOnContentClick: true
                 },
                 type: 'inline'
             });
          });
          $(document).ready(function () {
             $('#thumb-popup-link-back').magnificPopup({
                 items:
                 {
                     src: '#backview',
                     closeOnContentClick: true
                 },
                 type: 'inline'
             });
          });
</script>

编辑 1:我添加了 razor 类代码的顶部，以显示如何加载 magnific-popup 库。

编辑2:

    <link href="/Themes/Motion/Content/CSS/custom.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/styles.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/tables.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/mobile-only.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/480.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/768.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/980.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/forum.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/css/footer.css" rel="stylesheet" type="text/css" />
<link href="/Content/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
<link href="/Scripts/fineuploader/fineuploader-4.2.2.min.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Styles/common.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Themes/Motion/Content/ajaxCart.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Styles/Ribbons.common.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Themes/Motion/Content/Ribbons.css" rel="stylesheet" type="text/css" />


    <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/Scripts/public.common.js" type="text/javascript"></script>
<script src="/Scripts/public.ajaxcart.js" type="text/javascript"></script>
<script src="/Scripts/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="/Scripts/fineuploader/jquery.fineuploader-4.2.2.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/jquery.styleSelect.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/jquery.jscrollpane.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Scripts/AjaxCart.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.core.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.userevents.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.draganddrop.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.window.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Scripts/jquery.json-2.4.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Scripts/ProductRibbons.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/footable.js" type="text/javascript"></script>
<script src="/Themes/Motion/Content/scripts/Motion.js" type="text/javascript"></script>

Answer 1

我发现了问题。这是我的一些插件。可能是 noscript 或请求策略...我还没有弄清楚哪一个阻止了单个 js 库的加载。这解释了为什么它突然停止工作。该插件必须已更新并开始引起问题。

这很糟糕……真的很糟糕。如果这些插件开始干扰网站，即使我已明确将它们放在我的白名单中，那么就会出现严重错误。

抱歉打扰了。也许该线程仍然可以帮助某人。