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

chenyou123_

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

阅读量499

点赞数

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

本文链接：https://blog.youkuaiyun.com/chengyou_/article/details/124929837

版权

前端专栏收录该内容

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

控制台报错：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

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

游海东的技术专栏

08-10

4992

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

Uncaught TypeError: window.top.$(...).tabs is not a function （jeecg 打开新tab

JEFFYU328的专栏

06-28

4658

请教大神：为什么我的jeecg，curdtools_zh-cn.js里的closetab 方法关闭不了当前的标签页。具体情况：1、在首页hplushome.jsp创建了个<t:datagrid>利用<t:dgfunOpt调用自定义函数打开了个tabfunction op(id,state) { debugger; window.top.addOneTab(id,"c...

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

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

是小D吖！的博客

09-19

3880

项目场景： 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

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

weiambt的博客

02-14

798

发现问题在使用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之前引入 ...

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

qq_38830589的博客

10-07

6668

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

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

星云

09-30

9332

症状一开始浏览器控制台报这个错[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

3315

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

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

最新发布

08-08

// 初始化 modal 方法 } }, mounted() { if (!this.$mpPageReady) { this.$once('mpPageReady', this.initWechatApi); } else { this.initWechatApi(); } } ``` 3. **生命周期顺序**：确保在调用 `...

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

maniacxx的博客

06-19

6969

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

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

arkitocy的博客

07-28

6865

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

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

slience_0427的博客

08-05

1745

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

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

二木成林

07-17

4855

异常当使用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

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

qq_35764460的博客

02-17

476

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