WordPress biedt volledige ondersteuning voor JavaScript en de jQuery bibliotheek. De manier waarop WordPress jQuery implementeert kan echter tot fouten leiden als je de functies probeert uit te voeren. Een van de meest voorkomende problemen is de “Uncaught TypeError: $ is not a function” fout.

Het oplossen van deze fout is betrekkelijk eenvoudig als je begrijpt wat de oorzaak is. De “$” alias is de kern van het probleem, en jQuery en WordPress bieden verschillende manieren om deze te omzeilen zodat je de functies kunt uitvoeren die je nodig hebt.

In dit artikel leggen we uit wat de “Uncaught TypeError: $ is not a function” fout is en wat de oorzaak ervan is. Daarna laten we je ook zien hoe je het probleem kunt oplossen. Laten we beginnen!

Wat is de “Uncaught TypeError: $ is not a function” fout in WordPress?

De “Uncaught TypeError: $ is not a function” fout is een veel voorkomende JavaScript fout die optreedt als de jQuery bibliotheek niet goed geladen is of als er een conflict is met andere scripts die het ‘$’ symbool gebruiken.

In WordPress heeft deze fout meer te maken met hoe het Content Management Systeem (CMS) jQuery implementeert en minder met laadproblemen.

jQuery is een populaire JavaScript-bibliotheek. Hij wordt veel gebruikt in WordPress thema’s en plugins voor het afhandelen van diverse dynamische elementen, animaties en AJAX-bewerkingen:

Homepagina jQuery bibliotheek
jQuery bibliotheek

In jQuery is het “$” symbool een alias voor het jQuery object, het primaire object waarmee je werkt als je met de bibliotheek werkt. Het maakt de code korter, leesbaarder en gemakkelijker te schrijven.

De “Uncaught TypeError: $ is not a function” is wat moeilijk op te lossen omdat je geen duidelijke foutmelding ziet. In tegenstelling tot andere WordPress fouten kan dit probleem worden veroorzaakt door verkeerd geconfigureerde elementen op je site of zelfs een 404 foutpagina:

Screenshot van een 404 “page not found” error
404 “Page not found” fout

De meest effectieve manier om het probleem te diagnosticeren is door een kijkje te nemen in de devconsole of door de debug-logs van WordPress te gebruiken.

Wat zijn de belangrijkste oorzaken van de “Uncaught TypeError: $ is not a function” fout?

De “Uncaught TypeError: $ is not a function” fout heeft alles te maken met jQuery. Je komt dit probleem tegen wanneer een functie met het “$” symbool wordt uitgevoerd terwijl de website wordt geladen.

Hier zijn enkele mogelijke oorzaken achter de fout:

  1. De jQuery bibliotheek is niet goed geladen. Als de jQuery bibliotheek niet goed geladen is, wordt het “$” symbool niet herkend als een geldige functie en geeft het een foutmelding. Dit is meestal geen probleem in WordPress, omdat het Content Management Systeem (CMS) de bibliotheek zelf laadt.
  2. Je gebruikt jQuery in de noConflict modus. WordPress gebruikt jQuery standaard in noConflict modus. Dat betekent dat het het “$” symbool niet herkent als functienaam. Om het te gebruiken zul je een workaround in werking moeten stellen.
  3. Plugin- of themaconflicten. Sommige plugins of thema’s kunnen onjuist gecodeerde JavaScript hebben die de goede werking van jQuery verstoren of het “$” symbool gebruiken op een manier die problemen veroorzaakt met andere scripts.

Kortom, WordPress is niet geconfigureerd om het “$” symbool te herkennen. Dat betekent echter niet dat je geen jQuery code kunt draaien binnen het CMS. De bibliotheek maakt immers deel uit van WordPress. Wat je moet doen is een workaround gebruiken om problemen met het “$” symbool te voorkomen.

Zo los de “Uncaught TypeError: $ is not a function” fout op (2 manieren)

Voordat we aan de slag gaan, is het belangrijk op te merken dat jQuery al deel uitmaakt van WordPress. Sommige tutorials zullen je instrueren om jQuery te enqueuen, maar de bibliotheek maakt al een tijdje deel uit van het Content Management Systeem (CMS).

WordPress draait jQuery ook out of the box in de “noConflict” modus. Dat betekent dat het het “$” symbool vrijgeeft zodat andere bibliotheken het kunnen gebruiken. In plaats van de “noConflict” modus uit te schakelen, moet je dit probleem hier aanpakken.

1. Gebruik “jQuery” in plaats van “$”

Als je problemen ondervindt bij het gebruik van het “$” symbool in functies, kun je in plaats daarvan “jQuery” gebruiken. Om je een voorbeeld te geven, zie je hier hoe een basis jQuery functie met “$” eruit kan zien:

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

In dit geval zou een snelle oplossing zijn om het “$” symbool te vervangen door jQuery. De code zou er dan als volgt uitzien:

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

Als alternatief kun je de code “wrappen” in een onmiddellijk gecallde functie-expressie die het jQuery symbool bevat. Het volgende voorbeeld zou de “Uncaught TypeError: $ is not a function” fout niet veroorzaken omdat het het jQuery symbool als wrapper gebruikt:

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

Nadat je deze wijzigingen in de code hebt aangebracht, kun je de devconsole van je browser of het debug-logboek van WordPress gebruiken om te zien of de fout blijft bestaan. Als dat zo is, moet je “jQuery” misschien naar een ander symbool mappen om meer fouten te omzeilen.

2. Gebruik een aangepaste alias in jQuery

“$” is de standaard alias voor het jQuery object. Maar omdat WordPress jQuery in noConflict modus draait, moet je misschien een alternatieve alias gebruiken om conflicten met andere bibliotheken te vermijden.

Dit proces is relatief eenvoudig, omdat je de alias met een enkele regel code kunt toewijzen aan een nieuw symbool:

vvar $j = jQuery;

Die code vervangt de standaard alias door “$j”, maar kan van alles zijn. Sommige developers geven de voorkeur aan deze aanpak boven het invoeren van het volledige “jQuery” object, zoals we in de vorige methode lieten zien.

Als je niet zeker weet waar je deze code moet toevoegen, kun je onze tutorial lezen over het toevoegen van code aan de header en footer in WordPress. Houd in gedachten dat zelfs als je een nieuwe alias registreert, je nog steeds “jQuery” kunt gebruiken in plaats van dat symbool.

Samenvatting

Met WordPress kun je jQuery gebruiken op je website. Als je echter fouten wilt vermijden zoals “Uncaught TypeError: $ is no function”, zul je moeten begrijpen hoe het CMS de bibliotheek implementeert. WordPress gebruikt de “noConflict” modus van jQuery, wat betekent dat het het “$” symbool niet herkent.

De fout “Uncaught TypeError: $ is no function” verschijnt wanneer je een functie probeert te gebruiken die jQuery callt met “$”. Om dit probleem te omzeilen kun je in plaats daarvan het volledige jQuery object typen of de alias naar een ander symbool mappen om conflicten te voorkomen.

Als je Kinsta gebruikt, kun je de WordPress debug modus inschakelen in het MyKinsta dashboard om problemen te diagnosticeren. Bovendien bieden al onze pakketten ondersteuning van topkwaliteit om je te helpen bij het oplossen van problemen die je kunt tegenkomen. Bekijk onze pakketten!