$(...).modal is not a function

chenyou123_

于 2022-05-23 16:34:02 发布

阅读量422

点赞数

分类专栏：前端文章标签： bootstrap jquery

本文链接：https://blog.csdn.net/chengyou_/article/details/124929837

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了在Spring Boot应用中遇到JavaScript错误`modal is not a function`的原因和解决方案。错误源于jQuery库未正确加载在Bootstrap之前。解决方法是确保在引入Bootstrap的JS文件之前引入jQuery，确保jQuery的方法可供Bootstrap使用。

摘要由CSDN通过智能技术生成

问题

控制台报错：modal is not a function

原因

springboot和jQuery的js文件引用顺序出错

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

解决

jquery的js文件引用在前
因为bootstrap引用了jquery中的方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenyou123_

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

“TypeError: _this.$refs.activity.openDialog is not a function“。父组件ref调用子组件

1461590508@qq.com的博客

01-11

2582

记录 TypeError: this.$refs.activity.openDialog is not a function"。父组件ref调用子组件的坑。报错的时候，首先查找，子组件引入进来是否注册。其次查找子组件是否写在根目录，div包裹。再查找，这个方法是写在哪里。如果在created里，是被报错的，要写在mounted中，此时dom已加载好。如果写在methods中，需要用。this.$nextTick()回掉，或者用定时器 setTimeout(()=>{ },500) 还要检查是否

Ant Design Vue Modal 对话框 this.$warning is not a function

qwe122343的博客

03-24

2981

Modal 对话框十分常用，但用官网这个信息提示模板竟然报错了 warning() { this.$warning({ title: 'This is a warning message', content: 'some messages...some messages...', }); }, 简单粗暴的结论： this.$warning应该改成Modal.warning 改后： warning() { Modal.warning({ title: 'This

参与评论您还未登录，请先登录后发表或查看评论

【异常处理】$(...).modal is not a function

weiambt的博客

02-14

715

发现问题在使用bootstrap配合AJAX的时候，控制台报错$(…).modal is not a function。 Uncaught Error: Bootstrap's JavaScript requires jQuery Uncaught TypeError: $(...).modal is not a function 原因 bootstrap中的javascript引用了JQuery，所以在标签中，jquery一定要在bootstrap之前引入 ...

前端报错：$(...).modal is not a function

maniacxx的博客

06-19

6907

今天使用jquery和bootstrap写前端代码碰到报错：$(…).modal is not a function 由于我不是专门做前端的，改了半天代码没改出来，难受，最后发现是js的引入问题，js的引入中，必须将jquery的引入放在bootstrap的引入之前，不然就会报一些奇奇怪怪的错误。...

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

游海东的技术专栏

08-10

4904

1、错误描述demo.js:214 Uncaught TypeError: $(...).customFileInput is not a function at HTMLDocument. (demo.js:214) at f (jquery-1.9.0.min.js:1) at Object.fireWith [as resolveWith] (jquery-1.9.0

Vue父组件调用子组件方法，报错[Vue warn]: Error in v-on handler: “TypeError: _this.$emit is not a function“

星云

09-30

9156

症状一开始浏览器控制台报这个错[Vue warn]: Error in v-on handler: "TypeError: _this.$emit is not a function"，明显就是this指向问题，名为ajax的方法在父组件中，而this是子组件。  <template> … <el-pagination layout="prev, pager, next" :page-count=

【VUE】this 作用域问题导致 $message 提示窗、loading 展示隐藏失效

sy12321的博客

02-22

3170

问题在编写前端功能时发现两个问题，由于要发送post json格式内容，修改了 axios 发送请求的脚本，导致在使用 Message 提示框，和 Loading 加载功能时，作用域出现了问题第一版代码 export default { data() { return { data_1: '', data_2: '', loading: false } }, methods: { addBtn() { thi

jQuery 常见错误：$(...).modal is not a function 的解决办法

qq_38830589的博客

10-07

6176

文章目录jQuery 常见错误1. $(...).modal is not a function jQuery 常见错误 1. $(…).modal is not a function 出现该问题原因： 1、重复引用文件可能会导致该问题首页可以通过 load 方法，链接到其他子页面，更新首页局部页面，首页导入的链接，其他子页面也可以使用，如果首页已经导入了 jquery.js 、bootstr...

TypeError: $(...).modal is not a function（在使用Bootstrap模板中的模拟框时出现）错误的解决方式

slience_0427的博客

08-05

1660

本人也是这两天学习SSM框架的时候遇到的问题，，在这里分享给一下。因为Bootstrap的js文件依赖于jQuery的js文件，所以再引入文件的时候需要注意文件引入的顺序；然后就可以使用了。还有一种错误是因为引入了两个相同的js文件或者是有着相同函数/方法的js文件，所以导致出现错误，不过我没见过，所以不是很清楚。...

$(...).modal is not a function的解决办法

arkitocy的博客

07-28

6741

在使用bootstrap的modal时遇到的问题，控制台报错$(…).modal is not a function，不能识别出bootstrap的modal方法。在确定了没有语法错误以及id问题后，将问题确定在浏览器解读问题上。因为bootstrap4是基于jquery实现的，所以只有将jquery的引用放在bootstrap前才能正常使用。 ...

解决SSM：$(...).modal is not a function

qq_35764460的博客

02-17

442

解决SSM：$(…).modal is not a function 今天在写bootstrap的模态框时，遇到这个问题，说$(…).modal 方法错误。运行后报错了想到bootstrap.min.js基于jquery框架，也就是说浏览器没有解读到jquery，马上看下引用的顺序，果然错了。解决办法：在bootstrap.min.js之前引用jquery即可转载：https://...

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

是小D吖！的博客

09-19

3779

项目场景： ssm框架配合bootstrap和AJAX，点击按钮弹出模态框。问题描述： Uncaught TypeError: $(…).modal is not a function 原因分析：没有引入bootstrap.min.js <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://cdn.bo

Bootstrap报错“Uncaught TypeError: $(...).modal is not a function“

二木成林

07-17

4276

异常当使用Bootstrap的模态框时，报如下错误：错误代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3

vue使用wx.showModal报错 wx.showModal is not a function