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

خیر اعمال نمی‌شود.
برای این کار لازم هست از مکانیزمی با عنوان 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