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 중국어 웹사이트의 기타 관련 기사를 참조하세요!