zoukankan      html  css  js  c++  java
  • bootsrap+jquery+组件项目引入文件的常见报错

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

    报错一:Uncaught ReferenceError: $ is not defined

    Uncaught ReferenceError: $ is not defined
    Uncaught ReferenceError: jQuery is not defined
    
    图片.png

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


    图片.png

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


    图片.png

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

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

    图片.png

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


    图片.png

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

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

    报错三: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)
    
    图片.png

    原因:包括两个不同版本的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
    
    图片.png

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

    原文作者:祈澈姑娘
    原文链接:https://www.jianshu.com/u/05f416aefbe1
    创作不易,转载请告知

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
    有个很难涨粉的的公众号叫:【编程微刊】


  • 相关阅读:
    黑马程序员面向对象09天1
    一键安装LNMP
    多屏互动技术
    阿里云CentOS 64位解决kernel2.6.32220.13.1.el6.x86_64 has missing requires错误
    listview的onItemClickListener失效
    在阿里云主机上基于CentOS用vsftpd搭建FTP服务器(赚)
    asp.net关于在线支付的实现过程
    C#关闭登录窗体,显示主窗体
    winform 刷新父窗体(转)
    用代码生成器生成的DAL数据访问操作类 基本满足需求了
  • 原文地址:https://www.cnblogs.com/ting6/p/9725731.html
Copyright © 2011-2022 走看看