JQuery node、jade 和 express 错误

Question

我收到一条错误消息，指出我的 js 脚本中的 $ 未定义，我真的很想深入了解我可能在做什么 wrong.As 结果我无法做任何 jquery 事情.我检查了资源，它们实际上都在加载。

错误信息：未捕获的 ReferenceError：$ 未定义

主页：

//doctype html
html
    head
        title=title
        link(href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css', rel='stylesheet')
        link(href='//fonts.googleapis.com/css?family=Roboto:400,300|Lato:100,300' rel='stylesheet')
        link(href='/css/bootstrap.min.css' rel='stylesheet')
        link(href='/css/custom.css' rel='stylesheet')
        link(href='/css/animate.css' rel='stylesheet')
        link(href="/css/pnotify.custom.min.css" media="all" rel="stylesheet" type="text/css")
        link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")
    body
        block content
    link(src='https://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript')
    link(src="/js/pnotify.custom.min.js")
    link(src="/js/custom.js")
    link(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js' type='text/javascript')

带有 javascript

的子页面

extends layout

block content
    nav.blue.darken-4(role="navigation" style="margin-bottom: 50px")
        .nav-wrapper(style="margin-left:10px")
            a.brand-logo(href='/home') Owen's Math Game - Admin Dashboard      
            ul.right.hide-on-med-and-down
                li(class="tooltipped active" data-position="bottom" data-delay="50" data-tooltip="Profile")
                    a(href='/home')
                        i.material-icons perm_identity   
                li(class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Users")
                    a(href='/users')
                        i.material-icons search      
                li(class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Leaderboard")
                    a(href='/admin/leaderboard')
                        i.material-icons list         
                li(class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Settings")
                    a(href='/settings')
                        i.material-icons settings
                li(class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Log Out")
                    a(href='/signout')
                        i.material-icons fast_rewind
    div.container
        div.row
            div.col-sm-6.col-md-4.col-md-offset-4
                #user
                    div.signup-wall
                        a(class="tooltipped" href="#" data-position="bottom" data-delay="50" data-tooltip="I am tooltip")
                            img(class='profile-img', style="display:inline" src='/avatar-img.png')
                        h1.text-center.login-title Welcome #{user.firstName} #{user.lastName} <br/> Check your details below:
                        ul.user-details
                            li Username  #{user.username}
                            li Email    #{user.email}
                            li First Name  #{user.firstName} 
                            li Last Name #{user.lastName}

    script.
        $(document).ready(function(){
            //Initialize collapse button
            $(".button-collapse").sideNav();

            $('.tooltipped').tooltip({delay: 50});
        })

在头部添加 jquery 不会改变错误

Answer 1

您在加载jQuery（定义$的库）之前声明正文内容。您还对所有 JS 文件使用 link 而不是 script。

您应该（至少）将 jquery 负载移动到之前 block content （在布局/"master" 文件中）。正如@Radu 在评论中还建议的那样，在 <head> 中将是一个很好的位置。

JQuery node、jade 和 express 错误

JQuery error with node, jade & express

javascript

jquery

node.js

pug