我是第一次使用我的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引导程序功能,但由于某些原因,它们无法正常工作。我是...
实际上,我只是缺少bootstrap.bundle.min.js。我很困惑,因为我有