为什么使用 jQuery 附加脚本元素时不会触发 `onload` 事件？

脚本标记的 OnLoad 事件问题

尝试按顺序加载脚本时，出现 onload 事件无法触发的问题。以下代码片段演示了该问题：

function loadScripts(scripts){
    var script = scripts.shift();
    var el = document.createElement('script');
    el.src = script;
    el.onload = function(script){
        console.log(script + ' loaded!');
        if (scripts.length) {
            loadScripts(scripts);
        }
        else {
            console.log('run app');
            MK.init();
        }
    };
    $body.append(el);
}

使用 jQuery ($body.append(el)) 将脚本元素附加到 DOM 时，不会触发 onload 事件。但是，使用原生 JavaScript document.body.appendChild(el) 会按预期触发事件。

解决方案：

要解决此问题，请修改代码如下：

function loadScripts(scripts){
    var script = scripts.shift();
    var el = document.createElement('script');
    $body.append(el);
    el.onload = function(script){
        console.log(script + ' loaded!');
        if (scripts.length) {
            loadScripts(scripts);
        }
        else {
            console.log('run app');
            MK.init();
        }
    };
    el.src = script;
}

通过在设置 src 属性之前将脚本附加到 DOM，onload 事件将按预期触发。此外，考虑使用 jQuery 的 getScript() 方法来实现跨浏览器兼容性。

以上是为什么使用 jQuery 附加脚本元素时不会触发 `onload` 事件？的详细内容。更多信息请关注PHP中文网其他相关文章！