未捕获的错误:Bootstrap的JavaScript需要jQuery

时间:2016-02-03 13:07:42

标签: javascript jquery html html5 twitter-bootstrap-3

首先,感谢您抽出时间看我的问题! 第二,我见过像我这样的其他问题(例如: Uncaught Error: Bootstrap's JavaScript requires jQuery with requirejs),但他们没有问我的问题。

所以,这是<head>

<html>
<!DOCTYPE html>

    

    <!-- metadata -->
    <meta charset="UTF-8">

        <!-- responsive -->
            <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- [/] responsive -->

    <!-- [/] metadata -->




    <!-- links -->

        <!-- bootstrap -->

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- [/] bootstrap -->

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- [/] links -->




    <!-- script -->
    <!--<script src="js/action.js"></script>-->

        <!-- jquery -->
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <!-- [/] jquery -->

        <!-- bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <!-- [/] bootstrap -->

    <!-- [/] script -->




    <title>standaard html</title>

</head>




<body>

    <!-- hoofdnavigatie -->
    <nav class="navbar navbar-default navbar-fixed-top      bas_hoofdnav">

        <!-- logo in menubalk -->
        <a class="navbar-brand" href="#">

            <img src="afb/logo/logo.png" class="bas_hoofdnav_logo" alt="Brand" >

        </a>
        <!-- [/] logo in menubalk -->




        <ul class="nav nav-pills navbar-right       bas_hoofdnav_knoppen">

            <li role="presentation" class="active       bas_hoofdnav_knp_actief"><a href="#" onclick="return false;">start</a></li>
            <li role="presentation"><a href="#">over ons</a></li>
            <li role="presentation"><a href="#">diensten</a></li>
            <li role="presentation"><a href="#">winkel</a></li>
            <li role="presentation"><a href="#">contact</a></li>

        </ul>

    </nav>
    <!-- [/] hoofdnavigatie -->

</body>

你可以看到我已经包含了jquery和bootstrap链接。但即便如此......我收到此错误消息: Uncaught Error: Bootstrap's JavaScript requires jQuery (anonymous function) @ bootstrap.min.js:6

and here the error

我在这里想念一下吗?

3 个答案:

答案 0 :(得分:15)

正如我在您的代码中看到的那样,您在Bootstrap js之后添加了jquery Js。在添加bootstrap js之前,您需要包含jquery js。您的问题将得到解决,因为bootstrap需要Jquery文件。

<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

答案 1 :(得分:6)

你需要将jQuery放在Bootstrap JS之上。

    <!-- jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- [/] jquery -->

    <!-- bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- [/] bootstrap -->

答案 2 :(得分:0)

确定使用以下命令包含了jquery库和bootstrap

首先,使用npm安装jQuery,如下所示: npm install jquery — save
其次,使用npm安装Bootstrap,如下所示: npm install --save bootstrap@3

我的问题出在:

angular.json仅更改project中包含的脚本文件的排序。

     "scripts": [
          "node_modules/jquery/dist/jquery.js"
          "node_modules/bootstrap/dist/js/bootstrap.js",
        ]

要这样:

     "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.js",
           "node_modules/jquery/dist/jquery.js"
        ]