رفع خطای Uncaught TypeError: $ Is Not a Function در وردپرس

Uncaught TypeError: $ is not a function یکی از خطاهای رایج در جاوااسکریپت است، وردپرس به طور کامل از javascript و jQuery پشتیبانی می کند. ممکن است روشی که وردپرس jQuery را آماده سازی می کند منجر به خطا یا ارور Uncaught TypeError: $ is not a function شود. البته می توان این خطا را رفع کرد، در ادامه مقاله شما را با نحوه رفع این خطا آشنا می کنیم.

خطای Uncaught TypeError: $ is not a function یک خطای رایج javascript است، این ارور زمانی نمایش داده می‌شود که کتابخانه jQuery به درستی بارگذاری نشده باشد و یا با سایر اسکریپت‌ها که از نماد $ استفاده می‌کنند تداخل داشته باشد.

در وردپرس، این خطا بیشتر به نحوه پیاده سازی jQuery توسط سیستم مدیریت محتوا (CMS) مربوط می شود و کمتر به مشکلات بارگذاری مربوط می‌شود. jQuery یک کتابخانه محبوب javascript بوده و به طور گسترده در قالب‌ها و افزونه‌های وردپرس استفاده می‌شود.

در jQuery، نماد $ نام مستعار برای شی jQuery است، این نماد شی اولیه‌ای است که هنگام کار با کتابخانه jQuery با آن تعامل دارید و موجب کوتاه‌تر، خواناتر و نوشتار آسان‌تر کد می‌شود. عیب‌یابی خطای Uncaught TypeError: $ Is Not a Function تا حدودی دشوار است، زیرا پیام خطای واضحی را مشاهده نمی کنید.

برخلاف سایر خطاهای وردپرس، برای پیدا کردن این خطا بهتر است به کنسول مرورگر مراجعه کنید، توجه داشته باشید خطای Uncaught TypeError: $ Is Not a Function ممکن از در پیشخوان و یا صفحات سایت شما رخ دهد.

خطای Uncaught TypeError: $ is not a function مربوط در اصل مربوط به jQuery است. در ادامه به برخی از دلایل احتمالی این خطا اشاره می کنیم:

• مراحل عیب یابی و رفع خطا : رفع 90٪ از مشکلات و خطاهای وردپرس
• آموزش فعال کردن Debug در وردپرس
• رفع خطای “یک خطای مهم در این وب سایت وجود داشت” در وردپرس
• آموزش رفع خطای 407 یا HTTP 407 Proxy Authentication Required
• Fatal Error چیست + نحوه رفع خطای Fatal در وردپرس

اگر کتابخانه jQuery به درستی بارگذاری نشده باشد، $ به عنوان یک تابع معتبر شناخته نمی‌شود و یک خطایی با متن Uncaught TypeError: $ Is Not a Function را مشاهده خواهید کرد. البته معمولا در وردپرس با این مشکل مواجه نخواهید شد، زیرا سیستم مدیریت محتوا (CMS) کتابخانه jQuery را به صورت بومی بارگذاری می کند.

منظور از این سرفصل تشخیص ندادن نماد $ را به عنوان نام تابع است. البته به طور پیش فرض، وردپرس jQuery را در حالت noConflict اجرا می کند اما به صورتی که سایر اسکریپت‌ها نیز بتوانند از $ استفاده کنند. غیرفعال کردن حالت noConflict در وردپرس پیشنهاد نمی‌شود.

برخی از افزونه‌ها یا قالب‌ها ممکن است javascript را به‌طور نامناسب فراخوانی کرده باشند که در عملکرد صحیح jQuery موجب اختلال شود و یا اینکه از نماد $ به‌گونه‌ای استفاده کرده باشند که باعث ایجاد مشکل در سایر اسکریپت‌ها شود .

در تمامی مراحل توجه داشته باشید که حتما فایل jQuery باید قبل از کدهای موجود فراخوانی شود برای مثال:

<script src="jquery.min.js"></script>
<script>
jQuery (function() {
	// This code will not trigger the error
});
</script>

در ادامه مقاله با چند راهکار برای رفع این خطا آشنا می‌شوید:

اگر هنگام استفاده از نماد $ در توابع با مشکل مواجه شدید، می توانید به جای آن از تابع jQuery استفاده کنید. برای در حالت پیشفرض کد شما احتمالا به این شکل است:

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

یک راه حل سریع جایگزینی نماد $ با jQuery خواهد بود. سپس کد به شکل زیر خواهد بود:

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

از طرف دیگر، می‌توانید نماد $ را به صورت یک پارامتر اضافه کنید. مثال زیر موجب ایجاد خطای “Uncaught TypeError: $ is not a function” نخواهد شد چرا که از jQuery به عنوان نام مستعار استفاده می کند:

jQuery(function ($) {
	console.log($('body'));
});

پس از انجام این تغییرات در کد، می توانید از کنسول مرورگر ( inspect developer tools > console ) استفاده کنید تا ببینید آیا خطا رفع شده است یا خیر. اگر ادامه دارد مرحله بعدی را انجام دهید.

همانطور که در ابتدای مقاله نیز به این موضوع اشاره شد، $ نام مستعار پیش فرض برای شی jQuery است. با این حال، از آنجایی که وردپرس jQuery را در حالت noConflict اجرا می‌کند، ممکن است لازم باشد از jQuery استفاده کنید اما برای کوتاه‌تر شدن این نام مستعار می‌توانید یک نام مستعار جایگزین برای جلوگیری از اختلال با کتابخانه‌های دیگر ایجاد کنید. برای مثال:

var $j = jQuery;

این کد نام مستعار پیش‌فرض $ را با $j جایگزین می کند برخی از توسعه‌دهندگان این روش را به تایپ کامل jQuery ترجیح می دهند.

راه حل بعدی استفاده از متد ready با نام مستعار jQuery است.

jQuery(document).ready(function($){
	// jQuery code is in here
});

استفاده ساختار IIFE نیز یک راه حل دیگر برای رفع خطای Uncaught TypeError: $ Is Not a Function است:

(function($){
	console.log($);
}(jQuery));

در این مقاله سعی شد تا چند راه حل برای رفع خطای Uncaught TypeError: $ is not a function را به شما نشان دهیم، استفاده از jQuery به جای $ و نام مستعار سفارشی در jQuery و همچنین ساختارهای دیگر از جمله مواردی بودند که به شما در رفع خطای $ is not a function کمک می کنند.