在ajax加載的圖像上調用函數

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的AJAX：

$('#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); 

});