ajax页面加载后如何使用ES6 JS重新初始化jQuery插件

Question

我最近建立了一个网站，它使用 router system 通过 ajax 加载每个页面。该站点是使用 webpack 编译的，并且结构为 ES6 JavaScript 模块。我正在使用一些第三方 jQuery 插件，这些插件只有在您刷新页面时才有效。

我的问题是如何在加载 ajax 页面后使用 ES6 JS 重新初始化或加载第三方 jQuery 插件和/或脚本？

例如，我正在使用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

是的，所以它似乎奏效了。呸。我想我不认为它会在 ES6 中使用 jQuery，所以感谢您的轻推！

我应该说我对 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"
    }); 

})