بررسی تفاوت بین نوشتن رویداد به صورت معمولی یا نوشتن on روی ان رویداد

[roya_django]

سلام

اگر زحمتی نیست میخواستم در مورد تفاوت های سه کد زیر توضیحی بدهید:

$(btn).click(	console.log("111")

	)

$('btn').click(function(){	console.log("222")

})

$('btn').on('click', function(){	console.log("333")

})

خصوصا در مورد تفاوت سومی با دو تای دیگر . بارها کدهایی نوشته ام که اولی کار نمی کرده ولی دومی کار می کرده و به همین ترتیب بارها هم
پیش امده که دومی کار نمی کرده و سومی کار می کرده اگر لطف کنین در این مورد توضیح مختصر کاربردی هم بدین ممنون میشم

متشکرم

[plague]

اولی رو که فکر نمیکنم کلا کار بکنه
تفوات آخری با بقیه اینه که شما میتونی رویداد رو به المنت پدر متصل بکنی بجای خود المنت دکمه

$('body').on('click' ,'btn' , function(){

console.log('something!');

})

مزیتش هم اینه که با عوض شدن المنت رویداد باز هم اجرا میشه
وقتی صفحه لود میشه js رویداد ها رو متصل میکنه به المنت ها
حالا شما اگه بعد از لود شدن صفحه مثلا با ایجکس المنت btn رو حذف کنی و یه المنت btn دیگه جایزینش کنی (خیلی وقتا پیش میاد که بعد از درخواست ایجکس قالب آپدیت میشه و المنت های جدید جایگزین قدیمی ها میشن)
اگه از روش دوم استفاده کرده باشی این btn جدید دیگه رویداد click بهش وصل نیست و اگه کلیک کنی کار نمیکنه
ولی اگه روش سوم استفاده کرده باشی رویداد کلیک به المنت پدرش body وصله که اون هم تغییری نکره در نتیجه با وجود اینکه دکمه btn رو عوض کردی باز هم کار خواهد کرد کلیک روش

[roya_django]

ایا محدودیتی در نوشتن تعداد on در یک صفحه داریم ؟ یا به هرتعداد که بخواهیم میتوانیم رویداد متصل کنیم؟

[roya_django]

و یک سوال دیگه اینکه چرا وقتی من در از فرم های جنگو استفاده می کنم وقتی با روش دوم میخواهم عناصر موجود در فرم را انتخاب کنم کار نمی کند اما با روش سوم بدون مشکل کار
می کنند؟

[roya_django]

و سوال دیگر اینکه:

اگر من از الان شروع کنم و هربار که خواستم رویداد ( هر رویدادی) روی یک المان تعیین کنم از روش سوم یعنی نوشتن on استفاده کنم ایا مشکلی برایم پیش خواهد امد؟
یا on هم بعضی اوقات کار نمی کند یا به تعداد محدودی میتوان on نوشت؟ اگر در مورد best practice استفاده از این دستور می دانید سپاسگزار میشم اگه دانشتون رو
اینجا بیارید

[plague]

1 - محدودیت نداری
2 - نمیدونم شما باید یاد بگیری دیباگ کنی کدای js رو دیباگ کنی ..... یاد بگیر با کنسول مرورگر کار کن تا متوجه بشی مشکل از چیه
3 - بعضی وقتا کار میکنه و بعضی وقتا کار نمیکنه نداریم تو برناه نویسی همه چیز دلیل داره و هیچ چیز اتفاقی نیست همونجور که بالا گفتم اگه کار نمیکنه باید یادبگیری تو کنسول مرورگر دیباگ کنی ببینی چیه مشکل ...on مشکلی نداره و به تعداد نامحدود میتونی بنویسی اگه المنت ممکنه تغییر کنه بعد از لود شدن صفحه حتما از on استفاده کن وگرنه میتونی رویداد رو مستقیما به خوده المنت وصل کنی رق خاصی نمیکنه

وقتی کار نمیکنه معمولا چند تا دلیل بیشتر نداره
1 - یا مشکل سینتکس داری توی رویدادی که نوشتی و متوجهش نیستی .... یا حتی ممکنه یه متغیر رو اسمش رو اشتباه نوشته باشی که اررور سینتکسی نمیگیره ازت ادیتور و لی موقع اجرا اررور میگیر
2 - کد یا پلاگینی توی صفحه هست که بالاتر از رویداد شما قرار داره و داره تولید اررور میکنه در نتیجه رویداد شما رو هم از کار میندازه
3 - کد js رویداد رو ممکنه قبل از تگ html نوشته باشی و در نتیجه این رویداد به المنت نمیچسبه .... اگه میخای رویداد رو قبل از تگ ها Html بنویسی (حالا چه مستقیم توی کد چه تو یه فایل js بنویسی بعد ضمیمه کنی ) باید توی یه wrapper قرارش بدی که بعد از لود شدن صفحه اجرا بشه مثل

$(document).ready(function(){   event })

$(function(){   event })

اون 2 مورد اول رو هم کافیه کنسول مرورگر رو باز بزاری موقع لود شدن صفحه اگه هرکدوم این موارد باشه اررور قرمز رنگ رو میبینی تو کنسول

[roya_django]

من از این کارها زیاد می کنم و همیشه دیباگ گوگل کروم در سمت راست صفحه ام هست.

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

علاوه بر اینکه به پیش بردن کار و تحویل پروژه سر موقع اعتقاد دارم به best practice هم اعتقاد دارم.


مثلا همین الان ذهن من درگیر اینه که:

وقتی من از فرم های جنگو استفاده نکنم اعتبار سنجی رو چطور باید انجام بدم؟ من میدونم که میتونم در سمت مرورگر کدهای جاوااسکریپت و html بنویسم و در
سمت سرور هم در views.py قبل از ذخیره کردن محتوای post شده خالی نبودن یا مطالب دیگری رو بررسی کنم. خب من میتونم این کارو بکنم و میدونم هم که کار میکنه.
اما این روش نسبت به رویکردی که خود جنگو داشت یعنی داشتن یک فایل به نام forms.py و در اون برای هر فرم یک کلاس داشته باشیم و در اون کلاس متدهای clean تعریف کنیم
یک کدنویسه اشفته به حساب میاد به همین دلیل قصد دارم روش سرچ کنم یا اصلا اگر میتونستم این قضیه ی on رو خوب درک کنم شاید بین استفاده کردن از فرم های جنگو یا نکردن انتخاب متفاوتی میکردم.
در هر حال بابت پاسخ کاملتون متشکرم

[plague]

وقتی رویداد کار نمیکنه کدت رو بشکون و خیلی ساده کن و کم کم به پیچیدگیش اضافه کن
تا متوجه بشی از چیه

مثلا وقتی رویداد کلیک کار نمیکنه همه کد ها رو حذف کن فقط یه آلرت ساده بزار ببین کار میکنه یا نه با کلیک
اگه کار کرد کد های قبلیت رو یک خط یک خط برگردون و در انتهاشون همون آلرت رو بزار ببین کدومشون آلرت رو از کار میندازه همون خط مشکل داره

اگرم آلرت همون اول کار نکرد مشکل از رویدادته سعی کن نام کلاس ها یا آیدی رو تغییر بدی و ای محل قرار گرفتن کد رو جابجا کنی