bootstrap+jquery项目引入文件报错的解决方法


Posted in jQuery onJanuary 22, 2018

做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错误的解决方法。

报错一:Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined

bootstrap+jquery项目引入文件报错的解决方法 

错误原因:文件加载的顺序不对,jQuery文件的顺序要在前面

bootstrap+jquery项目引入文件报错的解决方法 

方法:把jQuery文件写在所有script文件前面

bootstrap+jquery项目引入文件报错的解决方法 

报错二:jsp页面相对路径和绝对路径的问题:

正常路径:html里面的../../,改成jsp页面就找不到路径了,这个时候成了这个鬼样子

bootstrap+jquery项目引入文件报错的解决方法 

这时候,只需要在文件里面加入这段代码:

bootstrap+jquery项目引入文件报错的解决方法 

解决办法:在<html>和<head>之间插入以下代码

<%
 String path = request.getRequestURI();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path;
%>
<base href="<%=basePath%>" rel="external nofollow" >

报错三:Uncaught TypeError: $(...).tooltip is not a function

Uncaught TypeError: $(...).tooltip is not a function
 at HTMLDocument.<anonymous> (app.js:42)
 at l (jquery.min.js:4)
 at Object.fireWith [as resolveWith] (jquery.min.js:4)
 at Function.ready (jquery.min.js:4)
 at HTMLDocument.S (jquery.min.js:4)

bootstrap+jquery项目引入文件报错的解决方法 

原因:包括两个不同版本的jQuery UI。这可能会导致冲突。尝试删除

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

解决办法:

编辑:

<script>
jQuery( document ).ready(function( $ ) {
 $('.hasTooltip').tooltip();
});
</script>

像这样使用它,解决了我的问题!

报错四:Uncaught TypeError: $(...).sortable is not a function

Uncaught TypeError: $(...).sortable is not a function
 at HTMLDocument.<anonymous> (dashboard.js:12)
 at l (VM552 jquery.min.js:4)
 at Object.fireWith [as resolveWith] (VM552 jquery.min.js:4)
 at Function.ready (VM552 jquery.min.js:4)
 at HTMLDocument.S (VM552 jquery.min.js:4)

报错五:bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery

bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery
 at bootstrap.min.js:7

bootstrap+jquery项目引入文件报错的解决方法 

解决方案:解决方案:将jquery.min.js放在bootstrap.min.js文件之前引用,bootstrap.min.css文件在整两个文件前后引用都无妨(测试多次)。

总结

以上所述是小编给大家介绍的boostrap+jquery项目引入文件报错的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
基于jquery的on和click的区别详解
Jan 15 #jQuery
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
You might like
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
初品cakephp 入门基础
2012/02/16 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python中暂存上传图片的方法
2015/02/18 Python
通过shell+python实现企业微信预警
2019/03/07 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
新学期标语
2014/06/30 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
2014年度思想工作总结
2014/11/27 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
如何写好竞聘报告
2019/04/03 职场文书
辞职申请书范本
2019/05/20 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android