Как подключить javascript к вновь подгруженным элементам HTML на странице?

Имеются блоки div contenteditable="true" для комментариев на странице со следующим кодом:

HTML:

1. <div contenteditable="true" class="form-control contenteditable comment-textarea-edit js_app_comment_feed_textarea" data-text="{_p var='write_a_comment'}" ondragover="return false;" ondrop="return false;"></div>

Решил ограничить количество символов в них. Нашел javascript код, подключил:

Код (Javascript):

1. window.addEventListener('DOMContentLoaded', function() {
2.             var divs = document.querySelectorAll('div[contenteditable]');
3.                 [].forEach.call(divs, function(self) {
4.                     var maxLength = 50;
5.                     if(maxLength) {
6.                         self.addEventListener('input', function(e) {
7.                             if(this.innerHTML.length > maxLength) {
8.                                 var selection = window.getSelection(),
9.                                 range = selection.getRangeAt(0),
10.                                 pos = range.endOffset;
11.                                 this.innerHTML = this.innerHTML.substr(0, maxLength);
12.                                 try {
13.                                     range.setStart(range.startContainer , pos);
14.                                 } catch (e) {
15.                                     range.setStart(range.startContainer , pos - 1);
16.                                 }
17.                                 selection.removeAllRanges();
18.                                 selection.addRange(range);
19.                             }
20.                         }, false);
21.                     }
22.                 });
23.         });

Но естественно вновь подгруженные блоки при прокрутке страницы остаются "осиротевшими" и это не работает должным образом. Подскажите, как это исправить и организовать выполнение javascript правильно?

Буду благодарен за любую помощь, которую Вы сможете мне оказать.