Question

I have the following code that is used to switch background images on different nav menus within a horizontal scrolling site.

The problem I hav is that once i’ve added the.swap class to a image dynamically it doesnt react to the click call? Any ideas gratefully received!

Cheers
Paul

$('img.swap').click(function() {

var thisSrc = $('img.active').attr("src");
var alteredSrc = (thisSrc).slice(0, -7)+".png";
$('img.active').attr("src",alteredSrc);
$('img.active').addClass("swap");
$('ul.navigation li img').removeClass("active");
var thisSrc = $(this).attr("src");
initImg = $(this).attr("src");  
var imgType = (initImg).slice(-4);
var greyImg = initImg.slice(0, -4) + "_up" + imgType;
$(this).attr("src",greyImg);
$(this).addClass("active");
$(this).removeClass("swap");
 );

Answer 1

You’re looking for the live() function, which attaches an event handler to all the elements matching a selector, now and in the future.