programing

jQuery .load() / .ajax()가 추가된 후 반환된 HTML에서 Javascript를 실행하지 않음

copysource 2023. 8. 23. 23:58
반응형

jQuery .load() / .ajax()가 추가된 후 반환된 HTML에서 Javascript를 실행하지 않음

사용해 보았습니다..load()그리고.$.ajax컨테이너에 추가해야 하는 HTML을 가져오지만 요소에 추가할 때 반환된 HTML 내의 Javascript가 실행되지 않습니다.

사용..load():

$('#new_content').load(url+' #content > *',function() {
    alert('returned');
});

저도 $.Ajax 전화로 바꿔봤어요.그런 다음 반환된 HTML에서 스크립트를 추출한 후 컨테이너에 추가했지만 같은 문제로 JS가 실행되지 않거나 심지어 추가되지도 않고 있으며, 제가 이해하는 대로 추가하려고 합니다.<script>눈살을 찌푸리게 하는 DOM 요소에?

사용.$.ajax:

$.ajax({ url: url }).done(function(response) {
    var source  = $("<div>").html(response).find('#overview_script').html();
    var content = $("<div>").html(response).find('#content').html();

    $('#new_content').html(content);
    $('<script>').appendTo('#new_content').text(source).html();

});

HTML을 추가한 후 콜백에서 이 Javascript를 실행하는 것이 이상적이지만 변수는 컨트롤러에서 반환되는 값으로 설정됩니다.

그래서 요약하자면, 저는 그 HTML이 추가된 후에 실행되어야 하는 JS가 포함된 HTML을 얻으려고 노력하고 있지만, 저는 사용할 수 없었습니다..load()또는$.ajax()반환된 HTML의 스크립트가 추가될 때 사라지거나 전혀 실행되지 않기 때문입니다.

언제load()fragment selector와 함께 사용하면 fragment가 추가되기 전에 스크립트 요소가 제거되므로 스크립트가 실행되지 않습니다.

접미사가 붙은 선택기 식을 사용하지 않고 URL을 사용하여 .load()를 호출하면 스크립트가 제거되기 전에 내용이 .html()로 전달됩니다.이렇게 하면 스크립트 블록이 삭제되기 전에 실행됩니다.그러나 URL에 선택기 식을 추가하여 .load()를 호출하면 DOM이 업데이트되기 전에 스크립트가 제거되므로 실행되지 않습니다.두 경우의 예는 다음과 같습니다.

소트라이

$.get('partial.html', function(result){
    $result = $(result);

    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');

데모: 피들

실행할 스크립트가 무엇인지 알고 있으면 다른 곳에서 Ajax 응답으로 스크립트를 정의한 다음 콜백에서 호출할 수 있습니다.그래서 대신에:

$('#new_content').load(url+' #content > *',function() {alert('returned');});

사용할 수 있습니다.

$('#new_content').load(url+' #content > *',function() {my_function(my_param);});

이 코드는 어떻습니까?

$('#new_content').append($('<script>').html(source));

또는 단순히 자바스크립트 콘텐츠를 별도의 파일로 이동하여 로드할 수 있습니다.

$.getScript("url to js file");

아니면 그냥 사용하세요.

eval(source); 

언급URL : https://stackoverflow.com/questions/16352371/jquery-load-ajax-not-executing-javascript-in-returned-html-after-appende

반응형