解決「jQuery 未定義」錯誤

已發表: 2024-03-27

「jQuery 未定義」錯誤是 Web 開發中常見的障礙，尤其是對於那些剛剛將 jQuery（一種廣泛使用的 JavaScript 庫）整合到網頁中的人來說。 當 JavaScript 程式碼在載入程式庫之前或根本沒有載入程式庫時嘗試使用 jQuery 語法或函數時，瀏覽器控制台中會彈出此錯誤訊息。 本質上，這是瀏覽器的一種表達方式：“我不知道 jQuery 是什麼”，這會導致任何與 jQuery 相關的腳本執行立即停止。

錯誤的變化

「jQuery 未定義」錯誤可能以多種方式出現，具體取決於瀏覽器、環境（如開發環境與生產伺服器）或腳本包含在網頁中的方式。 此錯誤訊息的一些常見變體包括：

  • jQuery 未定義
  • $ 未定義
  • 未捕獲的引用錯誤：$ 未定義
  • 未捕獲的 ReferenceError：jQuery 未定義
  • ReferenceError：jQuery 未定義
  • 參考錯誤：$ 未定義
  • 類型錯誤：$(…)。 不是一個函數
  • 類型錯誤：jQuery(…)。 不是一個函數

理解 WordPress 中的“jQuery 未定義”

在 WordPress 生態系統中，主題和外掛廣泛使用 jQuery 來添加互動性並增強使用者體驗。 也許您正在使用的外掛程式旨在利用 jQuery 的功能（滑桿、彈出視窗、表單驗證等）。 當瀏覽器報告「jQuery 未定義」時，它本質上意味著您網站的 JavaScript 正在嘗試在 jQuery 本身載入之前呼叫 jQuery 函數，或者根本沒有載入。

WordPress 中出現此錯誤的常見原因

WordPress 特有的幾種情況可能會導致此錯誤，包括：

主題和外掛：主題或外掛程式不正確地排隊 jQuery，或依賴過時的版本，可能會導致此問題。

手動編輯：對主題檔案進行自訂編輯，特別是如果手動取消註冊 jQuery 或不正確地排隊，可能會導致此錯誤。

衝突：有時，安裝多個外掛程式並嘗試載入各自版本的 jQuery 可能會導致衝突，進而導致錯誤。

此錯誤的一般原因

腳本順序不正確：最常見的原因是您的 HTML 頁面在載入之前嘗試使用 jQuery。依賴 jQuery 的腳本必須放置在 jQuery 函式庫的<script>標記之後。

未能包含 jQuery ：僅僅忘記在網頁上包含 jQuery 就可能導致此錯誤。確保您有一個可以正確取得 jQuery 庫的<script>標記。

衝突的函式庫：有時，其他 JavaScript 函式庫或腳本可能與 jQuery 衝突，特別是當它們也使用$符號時。這可能會無意中導致 jQuery 被覆蓋或未正確初始化。

快取問題：在某些情況下，您的瀏覽器可能會快取不包含 jQuery 的舊版網頁，或者 jQuery 的路徑可能不正確，導致載入庫失敗。

內容傳遞網路 (CDN) 問題：如果您從 CDN 載入 jQuery，且 CDN 已關閉或無法訪問，您的網站將無法載入該程式庫，導致此錯誤。

如何修復 jQuery 未定義錯誤

在進行任何更改之前，確保擁有完整的網站備份至關重要。 如果您有權存取臨時或開發環境，則可以使用該環境來修復錯誤並繞過即時網站上直接編輯的任何潛在中斷。

有了這些保護措施，您就可以解決「jQuery 未定義」錯誤了。

透過測試腳本來源來驗證 jQuery 是否已載入

此問題背後的一個常見原因是，雖然可能包含 jQuery，但由於各種原因（例如不正確的 URL、網路問題或檔案存取權限），它未正確載入。 要驗證 jQuery 是否正確加載，一種簡單而有效的方法是直接在瀏覽器中測試腳本來源。

測試 jQuery 腳本來源的步驟

  1. 首先，您需要在 HTML 程式碼中找到包含 jQuery 的腳本標記。 這個標籤至關重要，因為它指定了應該載入 jQuery 的來源。 在程式碼中尋找如下所示的行：
    2.  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  2. 此src屬性包含您嘗試載入的 jQuery 函式庫的 URL。
  3. 從script 標記的src屬性中提取 URL 。這是指向您網站上包含的 jQuery 檔案的直接連結。 確保準確複製整個 URL，包括開頭的http://或https://部分。
  4. 在網頁瀏覽器中開啟一個新分頁或窗口，並將複製的 URL 貼到網址列中。 按 Enter 鍵導覽至此 URL。

如果 jQuery 檔案正確加載，您將在瀏覽器中看到 jQuery 庫的全部內容以純文字形式顯示。 這表示 jQuery 腳本來源可以存取並且可以按預期運行。

驗證 jQuery 載入的替代方法

如何透過頁面來源驗證 jQuery 加載

使用查看頁面原始碼來搜尋 jQuery 載入。

  1. 使用您喜歡的網頁瀏覽器導覽至您要檢查的網頁。
  2. 右鍵點選網頁上的任意位置，然後從上下文選單中選擇「檢視頁面來源」 。 此選項在瀏覽器之間可能略有不同。
  3. 打開原始程式碼後，您現在需要找到 jQuery 腳本包含項目。 透過使用瀏覽器內建的搜尋功能可以輕鬆完成此操作：
  4. 在 Windows 上按Ctrl+F或在 Mac 上按 Command+F開啟搜尋列。
  5. 在搜尋欄位中輸入jquery ，然後按 Enter。 此操作將突出顯示原始程式碼中所有出現的 jquery。
  6. 在反白的結果中尋找類似連結到 jQuery 庫的腳本標記的行。

它可能看起來像這樣：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

或對於本地託管的 jQuery，如下所示：

 <script src="/path/to/jquery.min.js"></script>

如果您找到這樣一行，則 jQuery 已包含在您的頁面中。 如果沒有，jQuery 可能無法加載，這可能會導致您遇到的問題。

使用開發者工具驗證 jQuery 加載

使用開發人員工具確定 jQuery 載入。

  1. 造訪您的網站並在瀏覽器中開啟開發人員工具。 通常可以透過右鍵點擊頁面並選擇「檢查」或按F12或Ctrl+Shift+I (Windows) /Cmd+Option+I(Mac) 來完成此操作。
  2. 在開發人員工具中，找到並按一下「網路」標籤。 此標籤顯示您的網站在載入時發出的所有網路請求。
  3. 選取「停用快取」選項，然後在「網路」標籤開啟的情況下重新載入您的網站以擷取所有載入活動。
  4. 使用過濾器選項將結果範圍縮小到 JavaScript 檔案。 通常，您可以透過選擇JS過濾器或在過濾器/搜尋框中鍵入jquery來完成此操作。
  5. 捲動瀏覽正在載入的腳本清單或使用「網路」標籤中的搜尋功能來尋找與 jQuery 相關的條目。 您正在尋找名稱中包含jquery 的文件，表示正在載入 jQuery 庫。

確保 jQuery 正確包含在 WordPress 中

如果您發現 jQuery 未加載，或者儘管存在 jQuery，但您遇到問題，您可能需要確保它已正確包含在您的 WordPress 主題或外掛程式中。 WordPress 透過wp_enqueue_script函數提供了一個強大的方法來管理腳本。 此方法是首選方法，因為它可以有效處理腳本依賴性並有助於避免衝突。

在 WordPress 中將 jQuery 入隊

  1. 使用 FTP 用戶端或託管服務提供的檔案管理器連線到您的 WordPress 網站。
  2. 導航到主題的資料夾並找到functions.php檔案。 建議建立一個子主題並在其中進行更改，以避免在主題更新時丟失自訂內容。
  3. 如果缺少 jQuery，您可以透過將以下程式碼片段新增至您的functions.php檔案中將其排入佇列：
 函數 my_theme_enqueue_scripts() {

 wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

這可確保 WordPress 在您網站的所有頁面上包含 jQuery。

如果您要新增依賴 jQuery 的自訂腳本，請確保將 jQuery 列為依賴項，如下所示：

 wp_enqueue_script( '自訂腳本', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true );

使用 Google 託管的 jQuery 實作本地回退

在您的網站中包含 Google 託管的 jQuery 版本是利用 Google 的 CDN 快速可靠地交付這項熱門 JavaScript 程式庫的常見做法。 然而，為了確保您的網站保持穩健，應對潛在的 CDN 中斷或網路問題，實施本地後備至關重要。 如果由於任何原因 Google 託管的版本無法加載，此設定允許您的網站自動使用本地託管的 jQuery 版本。 此方法透過優化效能同時確保冗餘來遵循 Web 開發最佳實務。 以下是有效實施該策略的逐步指南。

包括 Google 託管的 jQuery

首先，您需要將 Google 託管的 jQuery 腳本標記新增到您的網站。 將此標記放置在HTML 文件的<head>部分中或位於結束</body>標記之前，以確保依賴 jQuery 的其他腳本可以使用它。 例如：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

新增本地後備腳本

緊接著 Google 託管的 jQuery 的腳本標記，您將會加入一小段 JavaScript。 該腳本檢查 jQuery 是否已從 Google CDN 成功載入。 如果沒有，它會動態地將新的腳本標記寫入 HTML 文件以從本機來源載入 jQuery。

 <腳本>

 window.jQuery || document.write('<script src="/path/to/local/jquery-3.5.1.min.js"><\/script>');

</腳本>

確保將“/path/to/local/jquery-3.5.1.min.js”替換為伺服器上託管的 jQuery 檔案的正確路徑。

理解程式碼

window.jQuery ：這部分腳本檢查 jQuery 物件是否全域可用，這表示 jQuery 已成功載入。

document.write ：此方法用於將 HTML 插入文件中。此處用於在未載入 CDN 版本的情況下為本機 jQuery 檔案新增腳本標記。 轉義序列<\/script>用於防止字串被解釋為腳本區塊的結尾。

了解回退機制

回退機制基於一個簡單的檢查：window.jQuery 。如果未定義 jQuery 對象，則表示 CDN 版本未正確載入。 然後使用document.write方法注入一個新的<script>標籤，該標籤從本機檔案載入 jQuery。

好處

  • 確保 jQuery 始終可用，即使 CDN 發生故障也是如此。
  • 在本地加載 jQuery 可以減少某些場景下的延遲，特別是在 CDN 版本響應緩慢或用戶網路連接 CDN 出現問題的情況下。
  • 擁有本機副本可讓您控制正在使用的 jQuery 版本，從而實現一致的測試和偵錯。

將程式碼片段新增至 wp-config.php 文件

當您嘗試了各種方法來解決 WordPress 中的「jQuery 未定義」錯誤或類似 JavaScript 問題但沒有成功時，停用腳本串聯可能是一個有用的故障排除步驟。 腳本串聯是 WordPress 的一項功能，它將多個 JavaScript 檔案組合成一個請求，以縮短載入時間。 但是，這有時會導致錯誤或導致腳本載入問題，特別是在存在衝突或特定腳本未正確載入的情況下。

編輯 wp-config.php 文件

使用 FTP 用戶端或 Web 託管控制面板提供的檔案管理器來存取 WordPress 網站的檔案。

在文字編輯器中開啟wp-config.php檔案。如果您使用的是 FTP 用戶端，則需要先下載文件，使用電腦上的文字編輯器將其打開，然後編輯後將其上傳回來。 如果您在網站寄存控制面板中使用文件管理器，通常可以直接在瀏覽器中編輯文件。

捲動到文件底部，就在/* That's all, stop edit!行之前快樂的部落格。*/ .在這裡，貼上以下程式碼片段：

 /** WordPress 目錄的絕對路徑。 */

 if ( !define('ABSPATH') )

 定義（'ABSPATH'，目錄名（__FILE__）。'/'）;

 定義('CONCATENATE_SCRIPTS', false);

新增程式碼片段後，儲存變更。 如果您在電腦上本機編輯文件，請確保將其上傳回伺服器，替換現有的wp-config.php 。

理解片段

ABSPATH 定義：此行確保正確定義 WordPress 目錄的絕對路徑，這是 WordPress 正確運行的基本要求。

停用串聯：「define('CONCATENATE_SCRIPTS', false);」行明確告訴 WordPress 不要連結腳本。這可以透過單獨加載每個腳本來幫助偵錯腳本問題，從而更容易識別哪個腳本可能導致問題。

手動新增 jQuery 函式庫

直接在 WordPress 主題的header.php檔案中手動包含 jQuery 函式庫是一種簡單的方法，特別是當解決 jQuery 相關問題的其他方法未成功時。 此方法可確保 jQuery 在頁面渲染過程的早期加載，從而降低「jQuery 未定義」錯誤的風險。

如何手動包含 jQuery 函式庫

  1. 前往Google 託管庫頁面以存取最新版本的 jQuery。
  2. 找到頁面上列出的最新版本的 jQuery，然後複製提供的腳本標記。 時間
  3. 使用 FTP 用戶端或託管服務提供的檔案管理器來存取 WordPress 網站的檔案。
  4. 在 WordPress 目錄中，前往wp-content/themes/your-theme-folder/並找到header.php檔案。 將your-theme-folder替換為主題的實際名稱。
  5. 在文字編輯器中開啟header.php檔案。 如果您透過網站寄存控制面板使用檔案總管，則可以直接在瀏覽器中編輯檔案。

    6. 透過 FTP 用戶端存取主題資料夾中的 php 頭檔。

  6. 將您從 Google 託管庫複製的 jQuery 腳本標記貼上到header.php檔案中的開始<head>標記之後。 將其放置在 head 部分頂部附近可確保 jQuery 儘早加載，並且可供任何依賴它的腳本使用。

    7. 例如，

     <頭>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <!-- 以下是您的其他頭部內容 -->
  7. 新增 script 標籤後，儲存header.php檔。 如果您在電腦上本機編輯了該文件，請不要忘記將其上傳回伺服器，以替換該文件的舊版本。

重要考慮因素

子主題：如果您直接變更主題，最佳做法是使用子主題。 這可以防止您的變更在更新父主題時被覆寫。

測試您的網站：手動新增 jQuery 後，徹底測試您的網站，以確保腳本按預期運行並且不存在相容性問題。

結束語

在我們的部落格中，我們瀏覽了各種解決方案來解決「jQuery 未定義」錯誤，強調確保 jQuery 在網站上正確載入和實作的重要性。 我們介紹了透過頁面原始碼檢查和瀏覽器的「網頁」標籤來驗證 jQuery 的存在，並討論了透過 Google 託管的 jQuery 並輔以本地回退來增強網站可靠性。 此外，我們還探索了進階 WordPress 故障排除技術，例如在wp-config.php檔案中停用腳本串聯以及手動將 jQuery 添加到主題的header.php檔案中。自始至終，重點都放在謹慎的編輯實踐上，包括使用暫存環境和子主題進行安全修改，以維護網站功能和使用者體驗。

利用 AI 加速您的 WordPress 網站創建

使用 10Web AI Website Builder，創建適合您業務需求的自訂 WordPress 網站，速度提高 10 倍。

產生您的網站
無需信用卡