Как добавить в dom элементы с выполнением скриптов?

Question

[IliaMal]

Здравствуйте.

Сейчас на сайте используется JQuery, потихоньку отказываюсь от него, но возникли сложности с обработкой конетна получаемого через ajax.

Сейчас c использованием $.post() все просто, достаточно в подгружаемом html добавить нужные скрипты в <script> ... </script> и все будет работать.
На нативном js, через fetch() такая конструкция не работает.
Ситуационно я выхожу из положения через:

• .target
  
• вынос скриптов в отдельный объект и выполнение в new Function() или eval()
  
• обращение к функциям через onclick и прочим
  

Но это все костыли. Если на странице много используется аякса нужно что то универсальное.

Подскажите, есть ли готовой универсальный механизмы работы с контентом из ajax? Может библиотеки какие?
На бэкенде остается php, по этому js фреймворки типа React, vue и тд не подходят.

P.S. Нагуглить пытался, не нагуглилось.

Comments

[Александр]

Делегирование событий - то, что Вы ищите.

[Виталий Першин]

Сейчас на сайте используется JQuery, потихоньку отказываюсь от него

Просто потому что модно? Оставьте сайт в покое, откажитесь от JQuery в следующем проекте и не придумывайте проблемы на ровном месте.

[IliaMal]

Александр, да, спасибо. Усложняет конечно код, но на нативном js без этого ни как видимо.

[IliaMal]

Виталий Першин, я в задаче упростил, что бы не расписывать суть поставленных задач. Сайт переписывать не будем, там проще отформатировать и заново сделать, будет отдельный раздел, где хочется отказаться от jquery.

По моде хороший вопрос, мне кажется что все таки решение обусловлено тем что jquery стимулирует писать плохой код, и много весит, но возможно я поддался просто влянию моды, и сам себе придумал причины что нативыный лучше

Answer 1

[IvanU7n]

при динамическом добавлении разметки со script, его содержимое не выполняется, универсальным способом будет пройтись по добавленному куску разметки, найти все такие элементы и потом пересоздать их заменив новыми оригиналы:

element.innerHTML = /* разметка */
for (const sourceElement of element.querySelectorAll('script')) {
    const resultElement = document.createElement('script');
    resultElement.textContent = sourceElement.textContent;
    for (const attribute of sourceElement.getAttributeNames()) {
        resultElement.setAttribute(attribute, sourceElement.getAttribute(attribute));
    }
    sourceElement.replaceWith(resultElement);
}

Comments

[IliaMal]

Спасибо. Рабочий вариант.
Все им не закроешь, но совместно с делегированием вроде пошел процесс.

Answer 2

[Антон Шаманов]

JQuery состоит из частей, собственно если нужен только ajax, можно взять https://github.com/jquery/jquery/blob/main/src/ajax.js , но я бы все-таки посоветовал освоить fetch

Comments

[IliaMal]

Спасибо. Но соглашусь что все таки лучше довести до ума fetch