Выполнение JS-скрипта для контента, загруженного через AJAX

Question

У меня есть простой код, подобный этому:

JS:

function load (element, url) {
    element.innerHTML = '';
    fetch(url).then(function (resp) {
    return resp.text();
    }).then(function (content) {
    element.insertAdjacentHTML('afterbegin', content);
    });
}

Содержимое url Параметр load Функция:

<div>
    <button id="some-button">Execute click!</button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('some-button').addEventListener('click', function () {
            alert('Click at button has been executed.');
        });
    });
</script>

MyВопрос в том, почему событие click (или любой другой код JS) не работает?Содержимое HTML загружается, тег script также выполняется, но код JS не выполняется.Я просто хочу заменить загрузку функции jQuery загрузкой пользовательской функции, описанной выше.

Заранее спасибо!

Answer 1

Вот окончательный рабочий код:

fetch(url).then(function (resp) {
                return resp.text();
            }).then(function (body) {
                element.insertAdjacentHTML('afterbegin', body);
                let scripts = element.getElementsByTagName('script');

                for (let scr of scripts) {
                    var scriptContent = scr.innerText;
                    var newScript = document.createElement('script');
                    newScript.text = scriptContent;
                    scr.remove();
                    element.appendChild(newScript);
                }
            });

Answer 2

Я думаю, что включенный код JS не распознается как код JS.Я имею в виду, что текст, содержащий тег <script>, не рассматривается как код JS и не запускается.Перепробовал следующее и похоже на работу.Не уверен, решит ли это ваше требование, но это может помочь вам понять проблему.Обратите внимание на использование document.createElement('script')

<div id="content"></div>
<script>
var scr = `document.getElementById('some-button').addEventListener('click', function () {
            alert('Click at button has been executed.');
        });`;
var content = `<div><button id="some-button">Execute click!</button></div>`;

document.getElementById('content').insertAdjacentHTML('afterbegin', content);
var sel = document.createElement('script');
sel.text = scr;
document.getElementById('content').appendChild(sel);
</script>