javascript - Swup Js を使用し、プリロード JS プラグインを含めた後でも Js がロードされない

Question

私は Swup js の新規ユーザーです。JS の読み込みに関する問題の調査とテストにほぼ 2 日かかりました。Swup JS を使用して Web サイトに Preload JS Plugin を実装しようとしています。特定のページに 1 つの要素を固定する必要があります。ページを更新すると機能しますが、ページを変更してから戻ってくると、Preload JS が要素の JS を認識していないようです。ピン留めは、ページを更新した場合にのみ機能します。Swup js Repo ですでに多くの問題が発生しています。しかし、私の問題はまだそこにあります。

let options = {
    linkSelector: '.nav-list a:not([data-no-swup]) , a:not([data-no-swup])',
    animateHistoryBrowsing: true,
    animationSelector: '[class*="transition-"]',
    containers: ['#maan-dynamic-content', '#maan-dynamic-footer', '#maan-dynamic-menu'],
    plugins: [
      new SwupPreloadPlugin(),
      new SwupOverlayTheme({
        color: '#F88808',
        duration: 600,
        direction: 'to-right',
      })
    ],
  };

  init();

  const swup = new Swup(options);

  swup.on('contentReplaced', init);
  swup.on('willReplaceContent', unload);

関数初期化

function init() {
// init Isotope
    if (document.querySelectorAll('.grid').length) {
      var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        gutter: 30
    });

      // store filter for each group
      var filters = {};

      $('.filters').on('change', function (event) {
        var $select = $(event.target);
        // get group key
        var filterGroup = $select.attr('value-group');
        // set filter for group
        filters[filterGroup] = event.target.value;
        // combine filters
        var filterValue = concatValues(filters);
        // set filter for Isotope
        $grid.isotope({ filter: filterValue });
      });

      // flatten object by concatting values
      function concatValues(obj) {
        var value = '';
        for (var prop in obj) {
          value += obj[prop];
        }
        return value;
      }

      //****************************
      // Isotope Load more button
      //****************************
      var initShow = 6; //number of items loaded on init & onclick load more button
      var counter = 3; //counter for load more button
      var iso = $grid.data('isotope'); // get Isotope instance

      loadMore(initShow); //execute function onload

      function loadMore(toShow) {
        $grid.find(".hidden").removeClass("hidden");

        var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function (item) {
          return item.element;
        });
        $(hiddenElems).addClass('hidden');
        $grid.isotope('layout');

        //when no more to load, hide show more button
        if (hiddenElems.length == 0) {
          jQuery("#load-more").hide();
        } else {
          jQuery("#load-more").show();
        };

      }

      //append load more button
      // $grid.after('<button class="" id="load-more"> Load More</button>');

      //when load more button clicked
      $("#load-more").click(function () {
        if ($('#filters').data('clicked')) {
          //when filter button clicked, set initial value for counter
          counter = initShow;
          $('#filters').data('clicked', false);
        } else {
          counter = counter;
        };

        counter = counter + initShow;

        loadMore(counter);
      });

      //when filter button clicked
      $("#filters").click(function () {
        $(this).data('clicked', true);

        loadMore(initShow);
      });
    }
}

document.addEventListener('DOMContentLoaded', init); 

しかしコンソールログ

TypeError: $(...).isotope is not a function
    init http://localhost:8848/assets/js/main.js:73
    e http://localhost:8848/assets/js/swup.min.js:1
    e http://localhost:8848/assets/js/swup.min.js:1
    e http://localhost:8848/assets/js/swup.min.js:1
    e http://localhost:8848/assets/js/swup.min.js:1

ページをリロードすると、コンソール エラーがなくなりました。

ご協力いただきありがとうございます。