تعریف رویداد برای المنتهای داینامیک با متد on در jQuery

- visibility ۰ mode_comment

تعریف رویداد برای المنتهای داینامیک با متد on در jQuery

تا حالا براتون پیش اومده که المنتهایی رو در صفحه به صورت داینامیک با استفاده از Ajax و ... ایجاد کنید و یک رویداد برای اونا تعریف کنید ولی هر کاری میکنید اون رویدادها فراخوانی نشن؟ در این مطلب با استفاده از متد on در jQuery این مشکل رو به راحتی حل میکنیم.

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

تا قبل از نسخه 1.7 کتابخانه jQuery از live برای اینکار انجام میشد. بصورت زیر:

ولی این متد در نسخه 1.7 بصورت Deprecated در اومد و در نسخه 1.9 بصورت کامل حذف شد و دیگه نباید از اون استفاده کنید. از jQuery 1.7 به بعد باید از متد on برای انجام اینکار استفاده کنیم. سینتکس کلی استفاده از متد on بصورت زیر هست:

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

بعضی از افراد عادت دارن که همیشه بجای staticAncestors المنت document رو قرار بدن. اینکار بهینه نیست و بهتره که نزدیکترین Parent استاتیک اون المنتهای داینامیک رو قرار بدین.

حالا یک مثال میزنم که بهتر استفاده از متد on رو متوجه بشید. فرض کنید که یک div با class = buttons داریم که دکمه ها بصورت داینامیک ساخته شده و درون اون قرار میگیرن. بصورت زیر:

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

میبینید که در ابتدا پدر استاتیک که همون div هست رو انتخاب کردیم و بعد از اون به عنوان ورودی دوم المنتهای داینامیک که button هستن رو قرار دادیم. با اینکار رویداد کلیک برای همه دکمه ها فراخوانی خواهد شد.

به همین راحتی.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.