解决：Uncaught Error: Bootstrap‘s JavaScript requires jQuery Bootstrap‘s 组件点击没有效果

于 2022-01-20 14:54:34 发布
阅读量708 收藏
点赞数 1
分类专栏： 前端 文章标签： bootstrap javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clour88/article/details/122601617
版权

出现 Uncaught Error: Bootstrap's JavaScript requires jQuery 问题的可能性

1.确认是否引入 jQuery 框架

2.jQuery 的框架要在Bootstrap's JavaScript 框架前先引入，有先后顺序

<script src="https://你的jquery存放位置/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

jquery框架 和  Bootstrap's JavaScript 以自己使用版本为准，文档版本仅供参考

clour88
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Uncaught Error: Bootstrap‘s JavaScript requires jQuery和Uncaught ReferenceError: jQuery is not define
lixingzhuo的博客
09-06 412
这里主要是因为bootstra的插件需要依赖于jQuery，很多小伙伴明明已经引入了相关的jQuery包，但还是发现浏览器报了这样的错误，我们已经把所有的包都引入了为什么还是会报错呢。这是因为在HTML中，代码执行的流程是自上而下的，我们只需要将被依赖的包放在需要的包之上导入。
Uncaught Error: Bootstrap‘s JavaScript requires jQuery报错问题解决
一茗道人 ~~ ~ 阿亮-的博客
10-16 2408
Uncaught Error: Bootstrap's JavaScript requires jQuery. 这是由于引入的bootstrap.min.js在jquery后面引入，所以只要将jquery的js放在bootstrap前面就行了.
Uncaught Error: Bootstrap's JavaScript requires jQuery解决方法
l_fireworks的博客
04-07 7178
js、css文件引入顺序导致的； 应该先引入jquery的js文件，再引入bootstrap的css文件； <script src="js/jquery-1.11.3js" type="text/javascript"></script> <link href="css/bootstrap.min.css" rel="stylesheet" type="tex...
能获取到值的情况下，td中添加值只能用document.write (message)；填写
huxihua2006的博客
08-11 305
<!doctype html> Bootstrap 101 Template 生成销售订单展示 序号 返回信息 数据 是否成功 1 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
Uncaught Error: Bootstrap's JavaScript requires jQuery
jiaonizuoren的博客
05-10 2873
在jsp中引入bootstrap后，刷新页面后在控制台出现以下错误。此时会发现，bootstrap的一些效果也无法显示出来，打开jsp代码后，引入顺序是这样的，导致这个报错的原因是：css，js文件引入的先后顺序，应该先引入jquery的js文件再引入bootstrap的css文件。解决办法：调换引入顺序即可，如下图：此时浏览器控制台不再报错，bootstrap的效果也可以正常显示出来了！！！！...
JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法
10-21
主要介绍了JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法,结合实例形式分析了javascript提示此类异常的常见原因与相关解决方法,需要的朋友可以参考下
JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
10-21
在JavaScript编程中，`Uncaught SyntaxError: Unexpected token ILLEGAL` 是一个常见的错误，它通常意味着解析器在解析代码时遇到了一个无法识别的字符或符号，导致语法错误。这个错误通常发生在代码的某个地方违反...
解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题
10-18
主要介绍了使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js ,小编把问题描述和解决方案分享给大家，需要的朋友可以参考下
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
easyui解决：Uncaught ReferenceError: jQuery is not defined
01-08
Uncaught ReferenceError: jQuery is not defined 具体报错后样式如下： 具体解决方竟然是修改JQuery的位置，必须在其他所有js的前面！！ 错误的代码： 正确的代码： 只能说是自己没有基础了 正确后的样式 ...
解决【Bootstrap's JavaScript requires jQuery】的问题
weixin_30609287的博客
08-26 203
楼主现在在自学boostrap，就遇到了一个初学者可能遇见的问题。报了这个错误Bootstrap's JavaScript requires jQuery 提示是第6行报错。但是，楼主却发现第6行是链接。链接的名字也没出错。后来，楼主才发现是顺序的问题。 解决方法：1，文件引入的先后顺序，应该先引入jquery再引入bootstrap，也就是把这两个文件的出现顺序换一下。 ...
页面引用bootstrap报错Bootstrap's JavaScript requires jQuery
热门推荐
PlutoLiu的专栏
05-08 5万+
导致这个报错的原因是bootstrap加载的顺序有问题，必须先引用jquery.min.js文件，然后再引用botstrap的js。 如下 src="../js/jquery.min.js"> src="../js/ajax.js"> src="../js/bootstrap.min.js"> src="../js/bootstrap.js"> src="../js/angular.min
bootstrapvalidator使用时需要注意的事项
coolcao的coder点滴
07-24 2万+
如果你使用的前端框架是bootstrap，那么前端验证框架就bubi [bubi]
Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4问题
fly_to_higher的博客
04-24 1997
1.背景：使用python3 Django 做一个发布会管理系统，用Bootstrap写页面 安装bootstrap 编写html文件加载bootstrap 运行后发现jQuery版本过低 2.解决方法： https://code.jquery.com/ 这是jQuery的网站，有各个版本，选择一个版本，将<script src="https://code.jqu...
jsp引入bootstrap、bootstrap-Validator后出现xxx is not a function的问题及解决办法！
qq570575562的博客
04-18 1710
在项目中看到后台页面有用的bootstrap, 但是空值判断却没有用自带的参数校验插件, 用js判断实在复杂不方便,索性github找到一个demo参考下,进行一番改造, 引入后发现报错: Uncaught TypeError: $(...).bootstrapValidator is not a function 网上看了下别人的解决办法,无法解决, 可能我的这个错误犯的比较低级,哈哈.. 这...
Uncaught TypeError: $(...).bootstrapTable is not a function该报错可能有三种情况
qq_37139060的博客
04-26 1万+
1.jquery和bootstrap的js引入顺序问题（jquery在前）； 2.只引入了bootstrap.js却没有引入bootstrap-table.js！ 3.jquery和bootstrap的版本不匹配，升级版本。
【前端】input类型required不起作用
winrh的博客
08-28 3131
解决方法： 使用表单提交，而非ajax，即可生效。也可以表单提交时处理事件。
HTML+CSS+Bootstraps+jQuery实现轮播图效果
最新发布
05-31
好的，我可以为您提供一些参考代码，帮助您实现轮播图效果。 HTML代码： ``` <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="image1.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="image2.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="image3.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> ``` CSS代码： ``` .carousel-item { height: 300px; background-color: #777; } .carousel-item img { object-fit: cover; height: 100%; width: 100%; } ``` jQuery代码： ``` $('.carousel').carousel({ interval: 2000 // 自动轮播时间间隔，单位为毫秒 }) ``` 以上是使用Bootstrap框架实现轮播图的基本代码，您可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值