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

Question

我知道“Uncaught ReferenceError: $ is not defined”是一个常见问题。 但我不知道我的代码哪里错了。 我用谷歌搜索但没有解决方案可以解决这个问题。 提前致谢！

错误截图

我的代码如下。

因为我的代码太长，所以我把它分成了3个jsp文件：list.jsp、authorModals.jsp、listAuthor.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>

作者Modals.jsp：

<!-- Author Modals -->

<!-- unrelated code here -->

<!-- List Author -->
<%@include file="listAuthor.jsp"%>                 <--! Links to 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

将您的代码更新到下面并查看，

几样东西：

加载脚本的顺序很重要，

确保在任何其他脚本之前加载jQuery

下面的代码将确保您的代码在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);
        });

    }

});

阅读有关文档就绪的更多信息

未捕获的 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