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>

我的问题是：为什么click事件（或任何其他JS代码）不起作用？ HTML内容已加载，脚本标记也已加载，但JS代码未执行。我只想用上面描述的自定义函数加载替换jQuery函数加载。

谢谢！

Answer 1

我认为这样包含的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>

Answer 2

这是最终的工作代码：

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);
                }
            });

通过AJAX加载的内容执行JS脚本

2 个答案: