Как повторно инициализировать функциональность JavaScript для динамически добавляемых элементов без повторяющихся прослу ⇐ CSS

[Anonymous]

Я разрабатываю платформу для социальных сетей, используя Django в качестве серверной части и купленный HTML-шаблон от ThemeForest для внешнего интерфейса. Шаблон был создан с использованием React, а затем экспортирован в обычный HTML, CSS и большой файл JavaScript (более 26 000 строк). Я сталкиваюсь с проблемами при попытке динамического добавления новых элементов в DOM и повторной инициализации функций JavaScript для этих новых элементов.
Проблема:
Большой размер Файл JavaScript содержит все необходимые функции для обработки взаимодействий пользовательского интерфейса, анимации и прослушивателей событий. Изначально, когда страница загружается, все работает нормально. Однако когда я динамически добавляю новые сообщения (например, когда пользователь прокручивает страницу вниз, чтобы загрузить больше сообщений), к новым элементам не применяются функции JavaScript.
Чтобы решить эту проблему, я обернул весь код из большого файла JavaScript в функцию под названием reinitialize. После добавления новых элементов я вызываю эту функцию повторной инициализации, чтобы применить к новым элементам необходимую функциональность JavaScript. Это работает, но приводит к серьезной проблеме: к существующим элементам добавляются повторяющиеся прослушиватели событий, что приводит к неожиданному поведению (например, многократному срабатыванию событий щелчка).
Сценарий:

Первоначальная загрузка страницы:

При начальной загрузке страницы файл JavaScript шаблона корректно инициализирует все элементы.

Код: Выделить всё

Like





// Initial call to reinitialize all elements
reinitialize();

Динамическое добавление новых сообщений.

Когда пользователь прокручивает страницу вниз, новые сообщения извлекаются и добавляются в DOM.

Код: Выделить всё

function loadMorePosts() {
fetch('/load-more-posts')
.then(response => response.json())
.then(data => {
data.posts.forEach(post => {
let postElement = document.createElement('div');
postElement.className = 'post';
postElement.innerHTML = `

Like
`;
document.getElementById('posts-container').appendChild(postElement);
});

// Call reinitialize to apply JavaScript functionality to new elements
reinitialize();
});
}

// Event listener for scrolling to the bottom
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadMorePosts();
}
});

Проблема:

Каждый раз, когда вызывается повторная инициализация, к существующим элементам добавляются повторяющиеся прослушиватели событий, что приводит к таким проблемам, как событие- слушатели отменяют друг друга, что не приводит к нажатию кнопки, но я реагирую на сообщение, которое снова вызывает функцию reinitialize(), чтобы правильно отформатировать реакции, нажатие кнопки будет работать, потому что их будет три к нему прикреплен прослушиватель событий, два отменяют друг друга, а третий берет верх (например, не отменяет, например переключение).
Вопрос:
Как повторно инициализировать функциональность JavaScript для динамически добавляемых элементов, не вызывая дублирования прослушивателей событий и других конфликтов? Есть ли более эффективный способ справиться с этим сценарием?
Попытки и соображения:

• MutationObserver: я рассматривал возможность использования MutationObserver для обнаружения новых элементов, но мне все равно нужно повторно применить эту функциональность, не создавая дубликатов.
• Выборочная повторная инициализация: В идеале я бы хотел повторно инициализировать только вновь добавленные элементы, но текущая структура большого файла JavaScript усложняет эту задачу.

Пример кода:
Вот фрагмент кода, иллюстрирующий проблему:

Код: Выделить всё

Social Media Platform





Like





// Initial reinitialization
reinitialize();

function loadMorePosts() {
fetch('/load-more-posts')
.then(response => response.json())
.then(data => {
data.posts.forEach(post =>  {
let postElement = document.createElement('div');
postElement.className = 'post';
postElement.innerHTML = `

Like
`;
document.getElementById('posts-container').appendChild(postElement);
});

// Call reinitialize to apply JavaScript functionality to new elements
reinitialize();
});
}

window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadMorePosts();
}
});

Мы будем очень признательны за любые советы или решения по эффективному повторному применению функциональности JavaScript к вновь добавленным элементам без дублирования. Спасибо!
Вот сложный JavaScript: app.min.js

Подробнее здесь: https://stackoverflow.com/questions/787 ... ments-with