jquery - 在 ajax 加载的图像上调用函数

Question

每次将鼠标悬停在图像上时，您都应该在某些 div（“标题栏”）上看到其标题（来自 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');

请帮助我对#sandbox 上加载的图像产生相同的效果

Answer 1

您需要使用 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);

});