Как переинициализировать jQuery плагинов с ES6 JS после ajax загрузки страницы

Question

Я недавно создал сайт, который использует систему маршрутизатора для загрузки каждой страницы через ajax. Сайт составлен с использованием веб-пакета и структурирован как модули ES6 JavaScript. Я использую некоторые сторонние плагины jQuery, которые работают, только если вы обновите sh страницу.

Мой вопрос: как мне повторно инициализировать или загрузить сторонние jQuery плагины и / или скрипты, используя ES6 JS после загрузки страницы ajax?

Например, я использую плагин Elevate Zoom , чтобы добавить масштаб изображения к изображениям. Когда я перехожу на другую страницу на сайте, который использует это, масштабирование отключается и снова работает только при повторной загрузке страницы.

$("#img_01").elevateZoom();

Что-то похожее на приведенное ниже?

import { component } from 'picoapp';
// import elevate zoom  
// import jQuery 


export default component(() => {

  // reinitialize plugin here?
  //$("#img_01").elevateZoom();

})

Answer 1

Да, похоже, это сработало. Д. Думаю, я не думал, что он будет использовать jQuery внутри ES6, так что спасибо за мягкое подталкивание!

Я должен был сказать, что я новичок в ES6 и мире Webpack.

import { component } from 'picoapp';
import $ from "jquery";
import zoom from '../lib/elevatezoom.js'


export default component(() => {

    $(".zoom").elevateZoom({
      zoomType: "inner",
      cursor: "zoom-in"
    }); 

})