2016-06-09 55 views
0

我正在創建網站,我正在使用NodeJS服務器。在我的公共文件夾中,我有一個名爲website.js的腳本,它具有jQuery代碼,可以在單擊h1時提供console.log。 (代碼如下)。但是當我點擊瀏覽器中的h1時,它不起作用。該文件加載正常,沒有404錯誤,我的CSS樣式表工作正常。EJS文件無法識別JavaScript文件代碼

進一步測試:我做了一個簡單的測試,看它是否會在我調用變量(測試代碼如下)時返回文本,它以「」(兩個引號)作爲響應,因此它不能識別它。

//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> 

回答

1
  1. 你需要你的腳本之前加載jQuery的。

    <script src="https://path-to-jquery"></script> 
    <script src="/javascripts/website.js"></script> 
    
  2. 你需要等待DOM是在其訪問任何元素之前準備就緒。用下面的代碼,你可以做到這一點:

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

或通過在<body>的,而不是在<head>底部把你的<script>秒。

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

由於您的#testh1元素尚未加載,因此您的測試代碼中會出現空字符串。

+0

我應該在哪個文件中加載jQuery? JavaScript(website.js)或EJS(website.ejs)文件? – AnonUser

+0

@AnonUser在EJS/HTML中就像你已經是。你只需要改變順序。您不能在JS代碼中放置'