Как установить событие для элементов, до добавления в DOM?

Question

[Abdula Magomedov]

Привет!
Собственно , вопрос в названии... Есть код

let notificationsElementContainer = document.createElement("div");
notificationsElementContainer.addEventListener("click", function () {
                    console.log("clicked");
                });

и т.д. После чего элемент добавляется в DOM. Но при клике на элемент, обработчик не запускается. В какую сторону копать?

Полный код метода:

this.view.clear();
        let documentFragment = [];
        let el;
        this.clients.forEach(function (client, i) {
            let j = i + 1;
            el = document.createElement("div");
            el.className = "list-group-item client-list-item " + client.warningLevel;
            el.id = "ind_" + j;
            el.title = client.id;
            el.dataset.id = client['id'];
            el.dataset.index = j;
            if (j % 2 == 0) {
                el.classList.add("event");
            }

            let firstColumn = document.createElement("span");
            firstColumn.innerText = j.toString();
            el.appendChild(firstColumn);

            let secondColumn = document.createElement("span");
            secondColumn.innerText = client.name;

            if (client.notifications.length > 0) {
                let notifications = "";
                client.notifications.forEach(function (value) {
                    notifications = notifications.length == 0 ? (" - " + value + "!") : (notifications + "<br>" + " - " + value + "!");
                });

                let notificationsElementContainer = document.createElement("div");
                
                notificationsElementContainer.addEventListener("click", function () {//Так не работает
                    console.log("clicked");
                });
                notificationsElementContainer.classList.add("client-notifications");
                notificationsElementContainer.setAttribute("onclick", "MARWA.Plug()"); // Так работает, но это уже кривое решение

                let notificationsElement = document.createElement("i");
                notificationsElement.dataset["container"] = "body";
                notificationsElement.dataset["toggle"] = "popover";
                notificationsElement.dataset["placement"] = "right";
                notificationsElement.dataset["content"] = notifications;
                notificationsElement.dataset["originalTitle"] = "<div>Уведомления... " +
                    "<button class='pull-right btn btn-xs btn-link'><i class='fa fa-times'></i></button>" +
                    "</div>";
                notificationsElement.className = "fa fa-exclamation-triangle";

                notificationsElementContainer.appendChild(notificationsElement);

                secondColumn.appendChild(notificationsElementContainer);
            }
            el.appendChild(secondColumn);
            documentFragment.push(el.outerHTML);
        }, this);

        this.view.append(documentFragment);

Comments

[Ivanq]

А можете привести краткий пример кода, который иллюстрирует эту проблему, пожалуйста?

[Abdula Magomedov]

Ivanq: вот же, привел сверху. Какой именно код вам нужен?

[Abdula Magomedov]

Ivanq: Добавил полный код метода

Answer 1

[Ivanq]

Из-за el.outerHTML сохраняются только тег и аттрибуты, а события теряются - именно поэтому его не люблю.

Тогда вместо documentFragment.push(el.outerHTML); будет documentFragment.appendChild(el);, а вместо let documentFragment = []; - let documentFragment = document.createFragment();

Типа того.

Comments

[Abdula Magomedov]

А! Все понял! Спс. Так как вы говорите делать не могу. Главное понял в чем проблему. От души душевное спасибо

[Abdula Magomedov]

Я использую скрипт Clusterize.js, ограничения из за этого

[Ivanq]

Abdula Magomedov: https://github.com/NeXTs/Clusterize.js/issues/42

[Abdula Magomedov]

Ivanq: Да, я понял. СПС. Я уже решил задачу.

[Ivanq]

Abdula Magomedov: Всегда рад помочь )