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 中国語 Web サイトの他の関連記事を参照してください。