Почему мой сценарий не отвечает на изменения класса?

Question

Я уже некоторое время пользуюсь jQuery, и это меня обескураживает - очень надеюсь, что я просто пугаю! У меня есть следующий 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');  
 }  
}

и следующий 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>

Идея состоит в том, что щелкает ссылка "home" (span id = "home"), добавляется класс "link", что делает его кликабельным в соответствии с функцией document.ready. Я вижу добавляемый класс, его CSS делает курсор указателем, поэтому я знаю, что он работает. Но функция loadContent (), кажется, не запускается - она ​​должна предупреждать свой идентификатор при нажатии, а затем показывать скрытый «большой палец» div - и ничего этого не происходит.

Чего мне не хватает?

Answer 1

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

Должно быть:

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

Когда класс link добавляется динамически после загрузки страницы, вы должны указать jQuery искать его в будущем.

Answer 2

link класс не существует при выполнении $(document).ready.Попробуйте live с параметром «click» вместо вызова «click».