如何修復 “Uncaught TypeError: $ Is Not a Function” 錯誤

WordPress完全支援 JavaScript 和 jQuery 庫。不過，WordPress 實現 jQuery 的方式可能會在您嘗試執行函式時導致錯誤。最常見的問題之一就是 “Uncaught TypeError: $ is not a function” 錯誤。

如果你瞭解了導致這種錯誤的原因，那麼排除這種錯誤就相對簡單了。”$” 別名是問題的核心，jQuery 和 WordPress 提供了幾種方法來規避它，以便你可以執行你需要的函式。

在本文中，我們將解釋什麼是 “Uncaught TypeError: $ is not a function”（未捕獲的型別錯誤：$ 不是函式）錯誤，以及導致該錯誤的原因。然後，我們還會告訴你如何排除故障。

什麼是WordPress中的 “Uncaught TypeError: $ Is Not a Function” 錯誤？

Uncaught TypeError: $ is not a function “錯誤是一種常見的 JavaScript 錯誤，當jQuery庫載入不正確或與其他使用 “$” 符號的指令碼發生衝突時就會出現。

在WordPress中，這個錯誤與內容管理系統（CMS）如何實現jQuery有較大關係，而與載入問題關係不大。

jQuery 是一種流行的 JavaScript 庫。它廣泛應用於 WordPress 主題和外掛，用於處理各種動態元素、動畫和 AJAX 操作：

jQuery 庫

在 jQuery 中，”$” 符號是 jQuery 物件的別名，它是與庫互動時的主要物件。它使程式碼更短、更易讀、更易寫。

Uncaught TypeError: $ is not a function”（未捕獲的型別錯誤：$ 不是函式）有點難以排除故障，因為你看不到明確的錯誤資訊。與 WordPress 的其他錯誤不同，網站上配置錯誤的元素甚至 404 錯誤頁面都可能引發這個問題：

404錯誤 – “未找到頁面”

診斷問題的最有效方法是檢視開發人員控制檯或使用 WordPress 除錯日誌。

導致 “Uncaught TypeError: $ Is Not a Function” 錯誤的主要原因是什麼？

“Uncaught TypeError: $ is not a function” 錯誤與 jQuery 有關。在網站載入過程中，如果執行了包含 “$” 符號的函式，就會遇到這個問題。

以下是導致該錯誤的一些潛在原因：

1. 沒有正確載入 jQuery 庫。如果 jQuery 庫未正確載入或排隊，”$” 符號將不會被識別為有效函式，並會產生錯誤。這在 WordPress 中通常不是問題，因為內容管理系統（CMS）會原生載入庫。
2. 你是在無衝突模式下使用jQuery的。預設情況下，WordPress 是在 noConflict 模式下執行 jQuery 的。這意味著它無法識別作為函式名的 “$” 符號。要使用它，你需要採取變通方法。
3. 外掛或主題衝突。某些外掛或主題可能會有編碼不當的 JavaScript，從而影響 jQuery 的正常執行，或者在使用 “$” 符號時導致其他指令碼出現問題。

總之，WordPress 的配置無法識別 “$” 符號。不過，這並不意味著你不能在內容管理系統中執行 jQuery 程式碼。畢竟，jQuery 庫是 WordPress 的一部分。您需要做的是使用變通方法來避免 “$” 符號帶來的問題。

如何修復 “Uncaught TypeError: $ Is Not a Function” 錯誤（2種方法）

在我們開始工作之前，有一點很重要，那就是 jQuery 已經是 WordPress 的一部分了。有些教學會指導你啟用 jQuery，但這個庫已經成為內容管理系統（CMS）的一部分有一段時間了。

WordPress 還以 “noConflict” 模式執行 jQuery。這意味著它會釋放 “$” 符號，以便其他庫可以使用它。與其禁用 “noConflict “模式，不如這樣解決這個問題。

1. 使用 “jQuery” 而不是”$”

如果在函式中使用 “$” 符號時遇到問題，可以使用 “jQuery” 來代替。下面是一個使用 “$” 的基本 jQuery 函式的示例：

$(function() {
// Your code here will run once the DOM is ready
});

在這種情況下，一個快速的解決辦法是用 jQuery 替換 “$” 符號。這樣，程式碼就會如下所示：

jQuery(function() {
// This code will not trigger the error
});

或者，你也可以將程式碼 “封裝” 在一個包含 jQuery 符號的立即呼叫的函式表示式中。下面的示例不會觸發 “Uncaught TypeError: $ is not a function”（未捕獲的型別錯誤：$ 不是函式）錯誤，因為它使用了 jQuery 符號作為封裝：

jQuery(function ($) {
// You can use $ inside the wrapper
console.log($('.primary-menu'));
});

修改程式碼後，可以使用瀏覽器的開發人員控制檯或 WordPress 除錯日誌檢視錯誤是否仍然存在。如果仍然存在，您可能需要將 “jQuery” 對映到另一個符號，以避免出現更多錯誤。

2. 在 jQuery 中使用自定義別名

“$” 是 jQuery 物件的預設別名。不過，由於 WordPress 是在無衝突模式下執行 jQuery 的，因此您可能需要對映一個替代別名，以避免與其他庫發生衝突。

這個過程相對簡單，只需一行程式碼就可以將別名對映到一個新符號上：

vvar $j = jQuery;

這段程式碼將預設別名替換為 “$j”，但也可以是其他任何你想要的名字。一些開發人員更喜歡這種方法，而不是像我們在前面的方法中展示的那樣，必須鍵入完整的 “jQuery” 物件。

如果你不確定在哪裡新增這段程式碼，可以閱讀我們的教學，瞭解如何在WordPress的頁首和頁尾新增程式碼。請記住，即使你註冊了一個新的別名，你仍然可以使用 “jQuery “來代替那個符號。

小結

WordPress 可以讓你在網站上使用 jQuery。不過，如果你想避免諸如 “Uncaught TypeError: $ is not a function”（未找到型別錯誤：$不是函式）之類的錯誤，就需要了解內容管理系統是如何實現該庫的。WordPress 使用 jQuery 的 “noConflict” 模式，這意味著它不識別 “$” 符號。

當你試圖使用一個使用 “$” 呼叫 jQuery 的函式時，就會出現 “Uncaught TypeError: $ is not a function” 錯誤。為了避免這個問題，你可以鍵入完整的 jQuery 物件，或者將別名對映到不同的符號，以避免衝突。