未捕获的类型错误：this.groupItems() 未定义答案

【问题标题】：Uncaught TypeError: this.groupItems() is undefined未捕获的类型错误：this.groupItems() 未定义
【发布时间】：2021-05-13 02:21:36
【问题描述】：

我在我的网站上使用Responsive Mobile-first Image Viewer - jQuery SmartPhoto 插件。我注意到如果我使用jquery-2.2.4.min.js，那么它可以工作，如果我使用最新的 jQuery jquery 3.5.1，那么它就不能工作。

有时我的控制台出现错误。

未捕获的类型错误：this.groupItems() 未定义

旧的 Jquery 3.5.1 不工作

$(function() {
  $(".js-img-viwer").smartPhoto();
});

<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/css/smartphoto.min.css">
<div class="masonry">

  <div class="brick">
    <a href="https://unsplash.it/867/1997?image=510" class="js-img-viwer" data-caption="Jeff Sheldon" data-id="raion">
      <img src="https://unsplash.it/360/829?image=510" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1140?image=494" class="js-img-viwer" data-caption="Matthew Wiebe" data-id="rakuda">
      <img src="https://unsplash.it/360/239?image=494" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1282/1929?image=482" class="js-img-viwer" data-caption="Danny Froese" data-id="kaba">
      <img src="https://unsplash.it/360/541?image=482" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1141?image=454" class="js-img-viwer" data-caption="Mia Domenico" data-id="koara">
      <img src="https://unsplash.it/360/239?image=454" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1141?image=449" class="js-img-viwer" data-caption="Maciej Serafinowicz" data-id="kuma">
      <img src="https://unsplash.it/360/239?image=449" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1140?image=445" class="js-img-viwer" data-caption="Aleksi Tappura" data-id="sai">
      <img src="https://unsplash.it/360/239?image=445" width="360" />
    </a>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/js/jquery-smartphoto.min.js?v=1"></script>

旧的 Jquery 2.2.4 工作

$(function() {
  $(".js-img-viwer").smartPhoto();
});

<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/css/smartphoto.min.css">
<div class="masonry">

  <div class="brick">
    <a href="https://unsplash.it/867/1997?image=510" class="js-img-viwer" data-caption="Jeff Sheldon" data-id="raion">
      <img src="https://unsplash.it/360/829?image=510" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1140?image=494" class="js-img-viwer" data-caption="Matthew Wiebe" data-id="rakuda">
      <img src="https://unsplash.it/360/239?image=494" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1282/1929?image=482" class="js-img-viwer" data-caption="Danny Froese" data-id="kaba">
      <img src="https://unsplash.it/360/541?image=482" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1141?image=454" class="js-img-viwer" data-caption="Mia Domenico" data-id="koara">
      <img src="https://unsplash.it/360/239?image=454" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1141?image=449" class="js-img-viwer" data-caption="Maciej Serafinowicz" data-id="kuma">
      <img src="https://unsplash.it/360/239?image=449" width="360" />
    </a>
  </div>
  <div class="brick">
    <a href="https://unsplash.it/1716/1140?image=445" class="js-img-viwer" data-caption="Aleksi Tappura" data-id="sai">
      <img src="https://unsplash.it/360/239?image=445" width="360" />
    </a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/js/jquery-smartphoto.min.js?v=1"></script>

【问题讨论】：

标签： javascript html jquery css jquery-plugins

【解决方案1】：

不知道为什么这会随着更新的 jQuery 版本而改变，但因为你想对你的图像做一些事情：

您是否尝试过使用 jquery 的 window.onload 而不是仅使用 $()-prefix？

$() 是 $(document).ready() 的缩写，它在 DOM 准备好后运行，而 $( window ).on( "load", function() { ... }) 在图像之类的东西也准备好后运行： https://learn.jquery.com/using-jquery-core/document-ready/

【讨论】：

我需要这样使用 $(window).on( "load", function() { $(".js-img-viwer").smartPhoto(); });但它不起作用
是这样的。那么一定是其他问题