آموزش رفع مشکل تداخل جی کوئری ها

باتوجه به روی آوردن زیاد طراحان و برنامه نویسان به سمت جی کوئری و ajax شدن صفحات بعضا استفاده همزمان از چند کتابخانه باعث تداخل بین جی کوئری ها می شود که ما راه رفع مشکل این تداخل را در این نوشته مورد بررسی قرار داده ایم.

رفع تداخل جی کوئری

رفع تداخل جی کوئریسلام. این اولین پست در وبسایت طراحی سایت یک طراح است. امیدوارم مورد توجهتون قرار گیرد.

رفع مشکل تداخل بین جی کوئری های یک صفحه تدبیل شده به یک مشکل بزگر برای طراحان و برنامه نویسان سایت.
اما امروز میخوام یک مطلب کامل در رابطه با جی کوئری و چگونی بر طرف کردن تداخل جی کوئری ها را براتون توضیح بودم. امیداورم مورد استفاده قرار بگیره.

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

روش اول رفع تداخل جی کوئری ها از طریق افزونه فایرباگ در فایرفاکس
که حتما آشنایی باهاش دارید و قسمت console میتونید مشکل رو مشاهده کنید و تا بتونید جهت برطرف کردن مشکل اقدام کنید.
همانطور که میدانید جی کوئری از $ در کدهای خود استفاده میکند همچنین بعضی کتابخانه های دیگر هم از این علامت اختصاری استفاده میکنند که موجب تداخل میشود. برای رفع این تداخل راههای مختلفی است که در این مقاله قصد داریم آنها را بررسی کنیم.

ابتدا سعی کنید از آخرین ورژن جی کوئری استفاده کنید و فقط یکبار کتابخانه جی کوئری را در سایت خود فرخوانی کنید. البته ممکنه توابع اسکریپت شما قدیمی باشه و با کدهای جدید سازگار نباشه که باید دیگر جی کوئری ها با یک ورژن ست بشه و یک بار فراخوانی بشه.

استفاده از تابع jQuery.noConflict() و استفاده از یک متغیر بجای $

به مثال زیر که در همین سایت جهت جلوگیری از تداخل مورد استفاده قرار گرفته توجه کنید :

<script type="text/javascript">
	$( "button" ).click(function() {
	$( ".toggle" ).toggle( "slow" );
	$("button").hide();
	});
</script>

که من از تابع jQuery.noConflict() و یک متغیر استفاده کردم . به شکل زیر :

<script type="text/javascript">
	var j = jQuery.noConflict();
	j( "button" ).click(function() {
	j( ".toggle" ).toggle( "slow" );
	j("button").hide();
	});
</script>

روش دیگر تغییر تقدم و تاخر کدها
سعی کنید همه کدهای جاوااسکریپت و جی کوئری را در پایین ترین قسمت سایت قرار دهید در صورتی که مشکل حل نشد با تغییر ترتیب اجرا شدن فایلها و و کدهای جاوای داخل صفحه است. گاهی با تغییردادن ترتیب لود کدهای جاوا و یا فایلها مشکل برطرف میشه.

رفع مشکل تداخل جی کوئری برای سایتهای وردپرسی
بهتراست از یک کتابخانه جهت طراحی سایت خود استفاده کنید و پیشنهاد میشود از آخرین ورژن جی کوئری استفاده کنید. ورژنی که به دیگر جی کوئری های شما میخورد پیدا کنید و از قالب خود حذف کنید سپس کد زیر را در functions.php قرار دهید و تست کنید.

  wp_deregister_script( 'jquery' ); // Unregister WordPress jQuery
  wp_register_script( 'jquery', 'نشانی کتابخانه را اینجا بگذارید', 'jquery', '1.10.2'); // Load Google CDN jQuery
  wp_enqueue_script('jquery'); // Enqueue it!

امیدوارم مورد استفاده قرار گرفته باشد

9 دیدگاه برای “آموزش رفع مشکل تداخل جی کوئری ها”

  1. سلام !
    مشکل من حل نمیشه !
    ۲ تا از جی کوئری ها تداخل دارن
    jQuery.js , jquery-1.11.0.min.js
    من بایستی چجوری از تابع jQuery.noConflict() استفاده کنم ! شاید بیش از ۲۰۰۰ خط هست بایستی تمام خطوط رو ویرایش کنم ؟
    لطفا دقیق بگید چجوری باس فراخوانی کنم !

    1. شما در خود سایتتون قسمتی که از کدهای جاوا استفاده شده رو بررسی کنید و از تابع مذکور استفاده کنید. نیازی نیست کل فایل .js رو تغییر بدید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *