未捕获的 ReferenceError: $ 未定义。（jQuery，JavaScript）

Question

I know that "Uncaught ReferenceError: $ is not defined" is a common problem.我知道“Uncaught ReferenceError: $ is not defined”是一个常见问题。 But I have no idea where my code is wrong.但我不知道我的代码哪里错了。 I googled but no solution could solve this.我用谷歌搜索但没有解决方案可以解决这个问题。 Thanks in advance!提前致谢！

错误截图

My code is below.我的代码如下。

Because my code is way too lengthy, so I divided it into 3 jsp files: list.jsp, authorModals.jsp, listAuthor.jsp.因为我的代码太长，所以我把它分成了3个jsp文件：list.jsp、authorModals.jsp、listAuthor.jsp。 I attach my code here, but I have deleted some unrelated code to make it short.我在这里附上我的代码，但我删除了一些不相关的代码以使其简短。

list.jsp:列表.jsp：

<!DOCTYPE html>
<html lang="en">

<head>

<title>Administrator</title>

<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="../css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="../css/freelancer.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet"
    type="../text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700"
    rel="stylesheet" type="../text/css">
<link
    href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
    rel="stylesheet" type="../text/css">

</head>

<body id="page-top" class="index">

    <!-- Author Modals -->
    <%@include file="authorModals.jsp"%>               <--! Links to authorModals.jsp-->

    <!-- jQuery -->
    <script src="../js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script
        src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="../js/classie.js"></script>
    <script src="../js/cbpAnimatedHeader.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="../js/jqBootstrapValidation.js"></script>
    <script src="../js/contact_me.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../js/freelancer.js"></script>

</body>

</html>

authorModals.jsp:作者Modals.jsp：

<!-- Author Modals -->

<!-- unrelated code here -->

<!-- List Author -->
<%@include file="listAuthor.jsp"%>                 <--! Links to listAuthor.jsp-->

listAuthor.jsp: listAuthor.jsp：

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Update</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody id="authorData">
    </tbody>
</table>


<script id="entry-template" type="text/x-handlebars-template">
      <tr>
        <td>{{authorId}}</td>
        <td>{{authorName}}</td>
        <td>{{authorId}}</td>
        <td>{{authorName}}</td>
      </tr>
    </script>

<script>
        var source = $("#entry-template").html();      <!-- My code stops here -->
        var template = Handlebars.compile(source);

        var dataString;
        $.ajax({
            method : "POST",
            url : "../listAuthor"
        }).done(function(data) {
            data = $.parseJSON(data);
            $.each(data, function(i, item) {
                var html = template(item);
                dataString += html;
            });
            $("#authorData").html(dataString);
        });

        function pageAuthor(page) {
            dataString = "";
            $.ajax({
                method : "POST",
                url : "../listAuthor",
                data : {
                    pageNo : page
                }
            }).done(function(data) {
                data = $.parseJSON(data);
                $.each(data, function(i, item) {
                    var html = template(item);
                    dataString += html;
                });
                $("#authorData").html(dataString);
            });

        }
    </script>

Answer 1

Update your code to below and see,将您的代码更新到下面并查看，

Few things:几样东西：

The order in which you load your scripts is important ,加载脚本的顺序很重要，

Make sure you load jQuery before any other script确保在任何其他脚本之前加载jQuery

The below code will ensure that your code is being loaded after jQuery has been initialized.下面的代码将确保您的代码在jQuery初始化后被加载。

jQuery(document).ready(function($) {
    var source = $("#entry-template").html();
    var template = Handlebars.compile(source);

    var dataString;
    $.ajax({
        method: "POST",
        url: "../listAuthor"
    }).done(function(data) {
        data = $.parseJSON(data);
        $.each(data, function(i, item) {
            var html = template(item);
            dataString += html;
        });
        $("#authorData").html(dataString);
    });

    function pageAuthor(page) {
        dataString = "";
        $.ajax({
            method: "POST",
            url: "../listAuthor",
            data: {
                pageNo: page
            }
        }).done(function(data) {
            data = $.parseJSON(data);
            $.each(data, function(i, item) {
                var html = template(item);
                dataString += html;
            });
            $("#authorData").html(dataString);
        });

    }

});

Read more information about document ready阅读有关文档就绪的更多信息

未捕获的 ReferenceError: $ 未定义。（jQuery，JavaScript）

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-10 09:00:23

未捕获的 ReferenceError: $ 未定义。 （jQuery，JavaScript）

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-10 09:00:23

未捕获的 ReferenceError: $ 未定义。（jQuery，JavaScript）

解决方案1
1 已采纳 2015-10-10 09:00:23