Behavios scripts do not work

Question

Migrated website from 7 to 10, but the jQuery scripts do not work anymore.

Code:

(function ($, Drupal, window, document, undefined) {
  Drupal.behaviors.myLinebreak = {
    attach: function (context, settings) {

        var eles = document.querySelectorAll('.title');    
        [].slice.call(eles).forEach(function(ele) {
          ele.innerHTML = ele.innerHTML.replace(/,/g, ',<br/>')
        });    
  }
};

})(jQuery, Drupal, this, this.document);

HTML:

<span class="title">Break this line, after comma</span>

What it does is that it injects <br> after the comma.

It works fine on Drupal 7:

<span class="title">Break this line,<br>after comma</span>

But on Drupal 10 it adds the <br> five times:

<span class="title">Break this line,<br>
<br>
<br>
<br>
<br>
after comma</span>

Why does it repeat on Drupal 10? It's same exact structure like Drupal 7. (there's more than one .title element on the page)

Using js_injector on Drupal 7 and assets_injector on Drupal 10

Answer 1

This code executes its attached code on document instead of on context. With document, the code will re-run on the entire document if Ajax adds anything to the DOM, whereas with context the code will run initially on the document, then on added elements as they appear.

So, there is probably some Ajax happening and this code repeatedly replaces the comma with ,<br>. In short, replace document.querySelectorAll with context.querySelectorAll.

But context alone might not be enough, as sometimes DOM elements may be passed in again. If that is the case you should also use once.