scrollspy,工具提示在Express应用中不起作用

问题描述 投票:0回答:1

我是第一次使用我的Express应用程序,发生了很多奇怪的事情。我正在尝试使用scrollspy和tooltip引导程序功能,但由于某些原因,它们无法正常工作。我收到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的页面,在该页面上,我的div带有id = sideMenu,但是当我转到此页面时,scrollspy无法正常工作,并且出现了之前所述的错误。

页面results.hbs也一样,我想在该图标上显示一些工具提示

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

我是第一次使用我的Express应用程序,发生了很多奇怪的事情。我正在尝试使用scrollspy和tooltip引导程序功能,但由于某些原因,它们无法正常工作。我是...

jquery bootstrap-4 scrollspy
1个回答
0
投票

实际上,我只是缺少bootstrap.bundle.min.js。我很困惑,因为我有

© www.soinside.com 2019 - 2024. All rights reserved.