[jQuery] hover() on html elements loaded by html()
I am developing a small photography/gallery site at the moment. This
is my first time using jQuery and I have run into a few problems. I've
overcome most but this one just keeps recurring no matter what I do.
So below I am loading the thumbnail images for the gallery
"Engagements" with the html() function. Then another function runs
through it and adds all the attributes (src, dimensions etc). But when
I try and use the hover() function on these newly loaded thumbnails
nothing happens. What am I doing wrong? Here is my code, thanks for
any help.
$(document).ready(function(){
$("#galleries").hide();
$('#content').load('home.html');
//th_over.png is a semitransparent overlay, which is supposed
to dissapear on mouseover/hover. But it doesn't.
$(".thumb").hover(function(){
var imgid = $(this).attr("alt");
var newSrc = $(this).attr("src").replace("th_over.png", imgid +
".gif");
$(this).attr("src",newSrc);
},
function(){
var imgid = $(this).attr("alt");
var oldSrc = $(this).attr("src").replace(imgid +
".gif","th_over.png");
$(this).attr("src",oldSrc);
});
$("#gallery").click(function(event){
$("#galleries").toggle('slow');
$('#content').load('gallerysplash.html'); return false;
});
$(".mlm").click(function(event) {
var pageurl = $(this).attr("href");
$('#thumbnails').hide('slow');
$('#galleries').hide('slow');
$('#content').load(pageurl); return false;
});
$("a#engagement").click(function(event){
$('#thumbnails').hide('slow');
$('#thumbnails').html("<img class='thumb' alt='e1' /><img
class='thumb' alt='e2' /><img class='thumb' alt='e3' /><img
class='thumb' alt='e4' /><img class='thumb' alt='e5' /><img
class='thumb' alt='e6' /><img class='thumb' alt='e7' /><img
class='thumb' alt='e8' />");
$('#thumbnails').show('slow');
$(".thumb").each( function (i) {
var imgid = $(this).attr("alt");
$(this).attr({
src: "images/thumbnails/th_over.png",
style: "background:url(images/thumbnails/" + imgid +
".gif)",
height: "38",
width: "38"
});
});
});
});