Question

I have been using jQuery for some time and this one’s stumping me- I really hope I’m just brain-farting!
I have the following JS:

$(document).ready(function(){

  $('.thumb,.link').click(loadContent);

});

function loadContent() {
    alert(this.id);  
 if(this.id == 'contact')  
 {  
   $('#thumbs').hide();  
   $('#content').show().load('contact.html');

   $('#home').addClass('link');  
   $('#contact').removeClass('link');  
 }  
 else if(this.id == 'home')  
 {  
   $('#thumbs').show();  
   $('.thumb').removeClass('dim');  
   $('#content').hide();  
   $('#home').removeClass('link');  
 }  
 else  
 {  
   var projectNumber = parseInt($(this).attr('src').replace("graphics/",""));

   $('#thumbs').hide();  
   $('.thumb').removeClass('dim');  
   $('#content').show().load("projects/" + projectNumber + ".html");  
   $('#home').addClass('link');  
 }  
}

and the following HTML:

<div id="container">  
<table id="left"><tr><td><span id="home">SOME GUY</span><br />  
<span id="all">&gt;</span>&nbsp;<span class="cat">ALL PROJECTS</span><br />
<span id="furniture">&nbsp;</span>&nbsp;<span class="cat">FURNITURE</span><br />
<span id="objects">&nbsp;</span>&nbsp;<span class="cat">OBJECTS</span><br />
<span id="graphics">&nbsp;</span>&nbsp;<span class="cat">GRAPHICS</span><br />
<span id="web">&nbsp;</span>&nbsp;<span class="cat">WEB</span><br />
<span id="contact" class="link">CONTACT</span></td></tr>
</table>
<div id="center">
<div id="thumbs"><img class="thumb furniture" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /><img class="thumb objects" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /><img class="thumb furniture" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb graphics" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /></div>
<div id="content"></div>
</div>
</div>

The idea is that the “home” link (span id=”home”) is clicked, the class “link” gets added, making it clickable according to the document.ready function. I can see the class being added, indeed its CSS makes the cursor a pointer so I know it’s working. But the loadContent() function seems not to run- it’s supposed to alert its ID when clicked and then show the hidden “thumbs” div– and none of that happens.

What am I missing?

Answer 1

$('.thumb,.link').click(loadContent);

Should be:

$('.thumb,.link').live('click', loadContent);

When the link class is added dynamically after the page loads, you need to tell jQuery to look for future instances of it.