محسن مهری
3 سال پیش توسط محسن مهری مطرح شد
1 پاسخ

گذاشتن یک listener روی یک element ای که هنوز در document وجود ندارد

درود دوستان من با vuejs کد میزنم. با یکسری شروط یک element ایجاد و نمایش داده میشود( ایجاد میشود.) .
حالا میخام با javascript ( منظور با javascript خام نه vuejs ) روی این element یک listener بزارم، (البته قبل اینکه هنوز وجود داشته باشد.)
این قضیه ( یعنی listener ) اعما میشود؟


ثبت پرسش جدید
محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 3 سال پیش آپدیت شد
0

خیر اعمال نمی‌شود.
برای این کار لازم هست از مکانیزمی با عنوان Event Delegation استفاده کنید. به این صورت که listener تون رو در اصل روی یکی از المنت های parent در لایه های بالاتر که قبلا به DOM اضافه شده قرار می‌دهید و بعد به شکل زیر چک می‌کنید که آیا آیتمی مورد نظرتون که بصورت داینامیک اضافه شده مدنظر هست یا نه:

document.querySelector('#wrapper').addEventListener('click',function(e){
    if(e.target && e.target.id== 'dynamic_element'){
          //do something
     }
 });

با استفاده از Jquery هم یکم ساده تر میشه:

$('#wrapper').on('click', '#dynamic_element', function(){
    //do something
})

منابع برای مطالعه بیشتر:
https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام