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);

});

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

2 个答案: