為什麼使用 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中文網其他相關文章！