jquery - scrollspy，工具提示在 express 应用程序中不起作用

问题描述

我第一次开发我的快递应用程序，很多奇怪的事情发生在我身上。我正在尝试使用 scrollspy 和工具提示引导功能，但由于某种原因它们不起作用。我收到 2 条错误消息：

jquery.js:3841 jQuery.Deferred exception: $(...).scrollspy is not a function TypeError: $(...).scrollspy is not a function

和

Uncaught TypeError: $(...).scrollspy is not a function

工具提示也是如此。

我想在这里向您展示我的设置，以便您发表评论。

我正在使用车把，在我的 main.hbs 中有这个

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>

    {{> _msg}}

    {{{body}}}

    <script src="/dist/vendor.bundle.js" charset="utf-8"></script>
    <script src="/dist/main.bundle.js" charset="utf-8"></script>

  </body>
</html>

我正在使用 webpack，配置是这样的

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
      mode:"development",
      entry:{
        main:'./src/scripts/script.js',
        vendor:'./src/scripts/vendor.js'
      },
      output: {
        path:path.join(__dirname,'/public/dist'),
        filename:'[name].bundle.js'
      },
      devtool:'source-map',
      module:{
        rules:[
          {
            test: /\.(png|jpe?g|svg)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name:"../images/[name].[ext]"
                }
              }
            ]
          },
          {
            test:/\.hbs$/,
            use:'handlebars-loader'
          },
          {
            test:/\.scss$/,
            use:[
               MiniCssExtractPlugin.loader,
               {
                 loader:'css-loader',
                 options:{sourceMap:true}
               },
              {
                loader:'sass-loader',
                options:{sourceMap:true}
              }
            ]
          },
          {
            test:/\.js$/,
            exclude:/node_modules/,
            use:[
              {
                loader:'babel-loader',
                options:{
                  presets:['@babel/env'],
                  plugins:['transform-class-properties']
                }
              }
            ]
          }
        ]
      },
      plugins:[
        new MiniCssExtractPlugin({
          filename:'../css/[name].css'
        })
      ]
    }

在我的 src/scripts/vendor.js 我只有这个

import "bootstrap"

在我的 src/scripts/script.js 我有所有的 jquery 和 js 我想在页面上使用

require('../scss/style.scss')
let helper = require('./functions')
const $ = require('jquery')

$(document).ready(function(){
  $('body').scrollspy({ target: '#sideMenu'})

  $('[data-toggle="tooltip"]').tooltip(
    {
    placement:"bottom",
    delay: {show: 100, hide: 100},
    boundary: 'window'
    }
  );
});

然后我有一个名为 details.hbs 的页面，其中我有 id=sideMenu 的 div 但是当我转到此页面时，scrollspy 无法正常工作，并且出现了我之前描述的错误。

页面 results.hbs 也是如此，我想在将鼠标悬停在图标上时显示一些工具提示

<img src="/images/detail.svg" title="some title." class="tooltipImg mr-2" data-toggle="tooltip">

标签： jquerybootstrap-4scrollspy

jquery - scrollspy，工具提示在 express 应用程序中不起作用

问题描述

解决方案

推荐阅读