آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش متد live در jQuery

دوره های مرتبط با این مقاله

متد live() در jQuery

در دو مبحث قبلی با استفاده از توابع bind() و unbind()، event handler ها را به المان های مختلف موجود در صفحه به ترتیب متصل کرده و از آن ها حذف می کردیم. این دو تابع برای المان هایی کاربرد دارد که هم اکنون بر روی صفحه موجود می باشند. اما اگر بخواهیم event handler ها را به المان هایی که در آینده به صفحه اضافه می شوند، متصل کنیم چه اقدامی را باید انجام دهیم؟ به طور معمول این کار را به صورت دستی و به هنگام ایجاد المان های جدید انجام می دهیم که اگرچه امکان پذیر است، اما کارآمد نیست. کتابخانه ی jQuery تابع بسیار پرکاربردی به نام live() را ارائه می دهد که به واسطه ی آن می توان event handler دلخواه را به المان هایی که ممکن است در آینده اضافه شوند و با selector مشخص شده (مثلا اسم کلاس) منطبق می باشند، bind کرد. به منظور تفهیم بهتر تفاوت دو متد نام برده، ابتدا متد bind() را برای متصل کردن event handlerبه المان بکار می بریم و در مثال بعدی همین کار را با live() انجام می دهیم:


نمونه یک

    
امتحان کنید

در این مثال یک لینک داریم که با کلیک بر روی آن متد AddBox() فراخوانی می شود. علاوه بر آن یک المان div در دست داریم که اسم کلاس آن "test" می باشد. متد AddBox() صرفا یک المان div دیگر با همان نام کلاس به صفحه اضافه می کند تا با کلیک کاربر بر لینک یک کادر دیگر به صفحه اضافه گردد. در رخداد ready، تمامی المان هایی که نام کلاس آن ها"test" می باشد را گزینش کرده و بعد یک handler به دو رخداد mouseover و mouseout متصل می کنیم که طی آن رنگ المان فراخواننده ی رخداد تغییر می یابد. این مثال را در مرورگر خود امتحان کنید. اولین div افکت mouseover را نمایش می دهد، اما زمانی که برای افزودن کادرهای جدید بر روی لینک کلیک می کنید، کادر های جدید دیگر همان افکت را نخواهند داشت. دلیل آن هم مشخص است: رخدادهای مزبور را قبل از ایجاد کادرهای جدید، bind کردیم.
اکنون مثال زیر را امتحان کنید. در این مثال تنها چیزی که نسبت به نمونه ی بالا تغییر یافته، متد live() بجای bind() می باشد:


نمونه دو

    
امتحان کنید

حال اگر نمونه ی بالا را اجرا کنید، می بینید که اگرچه المان جدید پس از بارگذاری کامل صفحه ایجاد شده، اما jQuery (به واسطه ی متد live()) به صورت خودکار event handler های mouseover و mouseout (تعریف شده در رخداد ready) را به المان جدید نیز متصل می کند. بدین وسیله المان div ای که به انتهای المان جاری الحاق می شود نیز از افکت تعریف شده در کد برخوردار می باشد (زمانی که موس بر روی div قرار می گیرد رنگ پس زمینه ی آن آبی شده و با ترک موس رنگ پس زمینه ی المان مذکور سفید می شود). متد die() نیز کاربردی مشابه unbind() دارد، اما فقط زمانی باید بکار گرفته شود که رخدادها توسط live() به المان های مورد نظر متصل شده اند.


امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.

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

از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی


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

  • 1317
  •    1134
  • تاریخ ارسال :   1395/01/17

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .