تعریف رویداد برای المنت های داینامیک در جی کوئری

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

در جی کوئری برای تعریف رویداد کلیک میتوانید به سادگی از .click() استفاده کنید این متد به خوبی برای المنتهایی که از ابتدا در صفحه بوده اند کار میکند ولی زمانی که به صورت داینامیک HTML به صفحه اضافه میکنید و سعی میکنید تا رویداد کلیک را برایش تعریف کنید به مشکل بر میخورید و خواهید دید که کار نخواد کرد. برای رفع این مشکا ما از متد .on() استفاده میکنیم.

مثال ۱: رویداد کلیک برای تگ <li> که بصورت داینامیک به صحه اضافه شده است.

در اینجا myUL ایدی المنتی هست که همراه در زمبن بارگذاری صفحه وجود داشته است و جی کوئری با استفاده از متد .on() میتواند رویداد کلیک را برای تگ HTML داینامیک نسبت دهد.

مثال ۲: نعریف رویداد کلیک برای div و row ها که به صورت داینامیک ساخته شده اند.

در اینجا ما یک جدول HTML داریم که به صورت داینامبک tr (ردیف) هایی به آن اضافه میکنیم. سپس میخواهیم که برای آن ها با استفاده از متدjQuery .on()  رویداد کلیک را تعریف کنیم .

جی کویری: در اینجا myTable ایدی جدول ماست و برای هر ردیفی tr که ب صورت داینامیک ساخته میشود رویداد کلیک تعریف کرده ایم.

در اینجا myDiv  ایدی مربوط به بیرونی ترین Div است. و هر span که دارای کلاس itemName باشد یک alert تولید میکند.

خودتان امتحان کنید

امتحان میکنم ⇒

همن موافقی

بیش 8 سال سابقه برنامه نویسی دارم و حداقل 4 ساله که طراح وب هستم. سعی میکنم بهترین خدماتم را در وبتازان عرضه کنم.

شما ممکن است این را هم بپسندید

پاسخ دهید

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