Question

Every time you hover over an image you should see its title (from alt tag) on some divs (‘titlebars’). The script below does exactly that for all images except those loaded via 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>   

This is how i load some images via jquery ajax:

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

Please help me out to have the same effect happen on the images loaded on #sandbox

Answer 1

You need to use jQuery on to bind the event to dynamically added elements.

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

  });
});