아약스로드 이미지에서 함수 호출하기

Question

이미지 위로 마우스를 가져갈 때마다 일부 div ('titlebars')의 제목 (alt 태그에서)이 표시되어야합니다. 아래의 스크립트는 jquery ajax를 통해로드 된 이미지를 제외한 모든 이미지에 대해 정확히 수행합니다.

<script> 
jQuery(document).ready(function() {  
$('img').hover (function(event){ 

    var $t1 = $('#tab1 #titlebars'); 
    var $href = $(event.target).parent('a').attr('href'); 
    var $tx = $('<a href="'+$href+'" style="float:right">'+this.alt+'</a>'); 

    $('#tab1 #titlebars a').remove(); 
    jQuery($t1).append($tx); 

    }); 
}); 
</script> 

이 난을 통해 어떤 이미지를로드하는 방법이다 JQuery와 아약스 :

$('#sandbox').load('./ajax/profile.html img'); 

같은 효과가

Answer 1

당신은 사용할 필요가 #sandbox에로드 된 이미지에서 발생하도록 저를 도와주세요 jQuery on 동적으로 추가 된 요소에 이벤트를 바인딩합니다.

jQuery(document).ready(function() {  
$(document).on('hover', 'img', function(event){ 

    var $t1 = $('#tab1 #titlebars'); 
    var $href = $(event.target).parent('a').attr('href'); 
    var $tx = $('<a href="'+$href+'" style="float:right">'+this.alt+'</a>'); 

    $('#tab1 #titlebars a').remove(); 
    jQuery($t1).append($tx); 

    }); 
}); 

Answer 2

당신은 새로 만든 요소에 이벤트를 잡기 위해 jQuery를 live() 구문을 사용할 수 있습니다

$('img').live('hover', function(event){ 

    var $t1 = $('#tab1 #titlebars'); 
    var $href = $(event.target).parent('a').attr('href'); 
    var $tx = $('<a href="'+$href+'" style="float:right">'+this.alt+'</a>'); 

    $('#tab1 #titlebars a').remove(); 
    jQuery($t1).append($tx); 

});