Question

我正在创建一个网站，我正在使用NodeJS服务器。在我的公共文件夹中，我有一个名为website.js的脚本，并且它具有jQuery代码，用于在单击h1时提供console.log。（下面的代码）。但是当我点击浏览器中的h1时它不起作用。文件正确加载，没有404错误，我的CSS样式表工作正常。

进一步测试：我做了一个简单的测试，看看它是否会在我调用变量（下面的测试代码）时回复文本，它会响应：＆＃34;＆＃34; （两个引号）所以它一定不能识别它。

//Test code
var xyz = $("#testh1").text();
//jQuery Code
$("#testh1").on("click", function(){
     console.log("Clicked");
});

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/javascripts/website.js"></script>
    <link rel="stylesheet" type="text/css" href="/stylesheets/website.css">
     <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>

 <h1 id="testh1">TEST</h1>

</body>
</html>

Answer 1

您需要在脚本之前加载jQuery。

<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>

在访问DOM之前，您需要等待DOM准备就绪。您可以使用以下代码执行此操作：

$(document).ready(function() {
    $("#testh1").on("click", function(){
         console.log("Clicked");
    });
});

或将<script>放在<body>的底部，而不是<head>。

    <script src="https://path-to-jquery"></script>
    <script src="/javascripts/website.js"></script>
</body>

您的测试代码中出现空字符串，因为尚未加载#testh1元素。

EJS文件无法识别JavaScript文件的代码

1 个答案: