Как повесить обработчик события на объект лайтбокса, который еще не существует на странице?

Question

[Svetlakofff]

Имеется страница с миниатюрой, при нажатии на которую открывается Lightbox с оригиналом.
Необходимо обрезать текст в названии изображения через javascript.
Прикрутил пробный скрипт повесив обработчик на щелчок мыши - работает, но только после нажатия разумеется.

<div class="light_top_hover">
            {if !empty($aForms.title)}
            {$aForms.title}
            {else}
..............................................
</div>

/* Не работает */

window.addEventListener('DOMContentLoaded', function() {
    var cut = document.getElementsByClassName('light_top_hover');
    for( var i = 0; i < cut.length; i++ ){
      cut[i].innerText = cut[i].innerText.slice(0,20) + '...';
    }
  });

/* Работает после клика */  

window.addEventListener('click', function() {
  var cut = document.getElementsByClassName('light_top_hover');
  for( var i = 0; i < cut.length; i++ ){
    cut[i].innerText = cut[i].innerText.slice(0,20) + '...';
  }
});

Понимаю, что это нужно правильно организовать через делегирование события, но масла в голове видимо не хватает)
Как заставить это работать самостоятельно при открытии лайтбокса?

Заранее благодарю за предложенный вариант.

Comments

[MrColdCoffee]

Попробуйте так:

document.addEventListener("DOMContentLoaded", function() {
 // тут ваш код
});

[Svetlakofff]

MrColdCoffee, нет, так не работает к сожалению.

document.addEventListener('DOMContentLoaded', function() {
    var cut = document.getElementsByClassName('light_top_hover');
    for( var i = 0; i < cut.length; i++ ){
      cut[i].innerText = cut[i].innerText.slice(0,20) + '...';
    }
});

[MrColdCoffee]

Svetlakofff,

document.addEventListener("DOMContentLoaded", function() {
const cut = document.querySelectorAll('.light_top_hover');
for(let i=0; i < cut.length; i++){
 cut[i].innerText = cut[i].innerText.slice(0,20) + '...';
}
});

[Svetlakofff]

MrColdCoffee, нет, не работает. Нужно через делегирование...
Такая реализация используется для ограничения ввода символов, как на основной странице, так и в лайтбоксе. И это работает должным образом.
Но у меня не получается построить правильно на ее основе :(

window.addEventListener('DOMContentLoaded', function () {
    var parentElement = document.body;
    var maxLength = 50;
  
    parentElement.addEventListener('input', function (e) {
      var target = e.target;
  
      if (
        target.matches &&
        target.matches('div[contenteditable].js_app_comment_feed_textarea')
      ) {
        if (target.innerHTML.length > maxLength) {
          var selection = window.getSelection(),
            range = selection.getRangeAt(0),
            pos = range.endOffset;
          target.innerHTML = target.innerHTML.substr(0, maxLength);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      }
    });
  });