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

Question

[Svetlakofff]

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

<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 код, подключил:

window.addEventListener('DOMContentLoaded', function() {
            var divs = document.querySelectorAll('div[contenteditable]');
                [].forEach.call(divs, function(self) {
                    var maxLength = 50;
                    if(maxLength) {
                        self.addEventListener('input', function(e) {
                            if(this.innerHTML.length > maxLength) {
                                var selection = window.getSelection(),
                                range = selection.getRangeAt(0),
                                pos = range.endOffset;
                                this.innerHTML = this.innerHTML.substr(0, maxLength);
                                try {
                                    range.setStart(range.startContainer , pos);
                                } catch (e) {
                                    range.setStart(range.startContainer , pos - 1);
                                }
                                selection.removeAllRanges();
                                selection.addRange(range);
                            }
                        }, false);
                    }
                });
        });

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

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

Comments

[Александр Васильев]

DOMNodeInserted попробуй и по хабру посмотри что-типа этого
https://qna.habr.com/q/1159920

Answer 1

[Svetlakofff]

Этот вариант исправно работает!

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);
        }
      }
    });
  });