jQuery를 사용하여 ajax를 통해로드 된 요소에 액세스 할 수 없습니다.

Question

ajax를 통해로드 된 내용을 수정해야하지만 액세스 할 수 없습니다. 초기로드를 수행하는 js 파일에 액세스 할 수 없으므로 별도의 함수를 작성하여 컨텐츠를 변경해야합니다.

사용자가 페이지에서 아무 것도 클릭하지 않거나 상호 작용하지 않고 콘텐츠를 자동으로 수정해야합니다.

아래 예제에서 'news'div는 하드 코딩되고 'article'div는 ajax를 통해로드됩니다.

는 HTML

<div id="news"> 
<div class="article"><img src="headline1_small.jpg"> 
<div class="article"><img src="headline2_small.jpg"> 
<div class="article"><img src="headline3_small.jpg"> 
</div> 

jQuery를

$(document).ready(function() { 
    console.log($("#news").html()); 
}); 

콘솔

<div id="news"> 
</div> 

어떻게 기사를 액세스 할 수 있습니까? img src에서 '_small'을 제거하고 싶습니다.

감사합니다.

Answer 1

이 작동합니다 :

$(document).ajaxStop(function() { 
    $("#news").find('img').attr("src", function(_, src){ 
     return src.replace('_small', ''); 
    }); 
}); 

Answer 2

가 어떻게 기사를 액세스 할 수 있습니까? img src에서 '_small'을 제거하고 싶습니다. 이 같은 예를 들어

: 당신은 당신이 div의이 AJAX를 통해로드 된 문서를했다

$(document).ajaxSuccess(function() { 
    // above code 
}); 

Answer 3

AJAX 성공적인 완료에이 코드를 실행할 수 있습니다

$('#news .article img').attr('src', function() { 
    return this.src.replace('_small', ''); 
}); 

,이 스크립트는 것 같다 로드되기 전에 실행 중입니다. #news 뒤에이 스크립트를 넣으면 실행될 때 모든 내용이 이미로드됩니다.

<div id="news"> 
<div class="article"><img src="headline1_small.jpg"> 
<div class="article"><img src="headline2_small.jpg"> 
<div class="article"><img src="headline3_small.jpg"> 
</div> 

<script> 
$(document).ready(function() { 
    console.log($("#news").html()); 
}); 
</script> 

Answer 4

img 태그의 src에서 "_small"을 제거하려면 다른 방법이 있습니다. #news div의 html() -> innerHTML에 액세스 할 필요가 없습니다.

모든 ".article"div를 잡고 img 태그를 변경하면됩니다.

$(".article img").each(function() { 
    $(this).attr('src', $(this).attr('src').replace("_small", "")); 
}); 

덕분에