Jquery沒有正確加載

我有這樣的代碼：https://jsfiddle.net/g412rft4/1/，你可以看到完美的作品。Jquery沒有正確加載

但是我試圖複製它與我的桌面上的test.html文件和Common.js文件以及它不起作用。看起來Jquery從未加載過，我不明白爲什麼。

這是.js文件的代碼：

$("#SaeReplacerBuilder").click(function() { 
    alert("ok"); 
});

這是.html文件的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Whatever</title> 
<script src="//code.jquery.com/jquery-2.1.4.js"></script> 
<script src="Common.js"></script> 
</head> 

<body> 
<div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div> 
</body> 
</html>

來源

2015-07-19 Saelyth

你可以從這裏加載jquery：'https：// ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'。這是來自Google API的最新版本。另外，如果你沒有在網站上這樣做，也就是說，你正在計算機上使用文件，如果你不在線，jquery將無法加載。 – TricksfortheWeb

將代碼包裝在'$（function（）{/ * code here * /}）'中。這對於所有jQuery來說都很基本。你的代碼在elememts存在之前運行 – charlietfl

現在它工作。謝謝你們倆。 – Saelyth

當你Common.js JavaScript文件運行該文件看起來像這個：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Whatever</title> 
<script src="//code.jquery.com/jquery-2.1.4.js"></script> 
<script src="Common.js"></script>

你必須等到文檔完全加載後再添加click處理程序。 jQuery的爲您提供了一個方法可以輕鬆地做到這一點：

$(function() { // This function will be run when the document is done loading 
    $("#SaeReplacerBuilder").click(function() { 
     alert("ok"); 
    }); 
});

更進一步，它通常是一個好主意，把你的Javascript附近的HTML代碼的底部，像這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Whatever</title> 
</head> 
<body> 
    <div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div> 
    <script src="//code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="Common.js"></script> 
</body> 
</html>

把它在<head>停止呈現網站，直到加載了Javascript文件。將它放在底部附近允許網站在加載Javascript之前呈現內容（通常非常快），這使得網站看起來更快加載。

來源

2015-07-19 20:59:00

腳本標籤需要是相對於你的HTML文件，然後我猜這不是在本地加載：

<script src="//code.jquery.com/jquery-2.1.4.js"></script>

嘗試添加協議是這樣的：

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

來源

2015-07-19 20:59:04 Brian

協議 - 相關鏈接（僅以//開頭的鏈接）僅在Web服務器提供頁面時起作用。我假設你只是從硬盤上查看文件。

添加一個協議，它的工作：

https://code.jquery.com/jquery-2.1.4.js

如果你已經證明是你的Common.js文件的確切內容，你需要：

一）總結代碼在ready事件：

$(function(){ 
    $("#SaeReplacerBuilder").click(function() { 
     alert("ok"); 
    }); 
})

b）將您的Common.js腳本到頁面的底部：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Whatever</title> 
     <script src="//code.jquery.com/jquery-2.1.4.js"></script> 
    </head> 
    <body> 
     <div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div> 
     <script src="Common.js"></script> 
    </body> 
</html>

否則，您正試圖在DOM準備好之前綁定點擊事件。我通常都會這樣做（使用準備事件和將腳本移動到底部），以確保安全。

來源

2015-07-19 20:59:05

作出了改變。仍然不起作用。是的，我只是從我的硬盤上觀看。 – Saelyth

Common.js中的代碼究竟是在「這是.js文件的代碼」之後顯示的代碼？如果是這樣，您還需要將代碼包裝在@charlietfl提到的ready事件處理程序中。 –

呃...你能解釋一下爲什麼它在jsfiddle中沒有改變嗎？是的，這兩個文件都完全**，如圖所示。 – Saelyth

出於安全原因，腳本由腳本標籤在導航方面不運行加載從文件加載時：//

你必須上傳真實服務器上，並以http存取權限吧： //

來源

2015-07-19 21:00:31 Cedric

Jquery沒有正確加載

回答

相關問題