這個類的jQuery：addClass和點擊功能

Question

我有2個點擊功能設置，第一個允許你點擊並滾動.test divs。在此之後，.test:last-child的目標是刪除red類，添加blue類，然後在blue類div上觸發點擊功能並隱藏它。唯一的問題是它似乎沒有認識到.blue div上的點擊功能，並且無法正常工作。
的jsfiddle演示： http://jsfiddle.net/neal_fletcher/adMYV/1/
HTML：

<div class="test red"></div> 
<div class="test red"></div> 
<div class="test red"></div> 
<div class="test red"></div> 
<div class="test red"></div> 

的jQuery：

$(document).ready(function() { 
    $(".red").click(function() { 
     var next; 
     next = $(this).nextAll(".test"); 
     $('html, body').animate({ 
      scrollTop: next.offset().top 
     }, "slow"); 
     return false; 
    }); 
}); 


$(document).ready(function() { 
    $('.test:last-child').removeClass('red').addClass('blue'); 
    $('.blue').click(function() { 
     $(this).hide(); 
     return false; 
    }); 
}); 

任何建議，將不勝感激！

Answer 1

嘗試這樣的：

http://jsfiddle.net/adMYV/3/

CODE

$(document).on("click", ".blue", function() { 
    $(this).hide(); 
    return false; 
}); 

Answer 2

您可以在.test選擇器上執行點擊事件。 然後在用戶的hasClass jquery函數中單擊函數事件，並在每種情況下按照您的需要進行操作。

編輯： 像這樣：

$(document).ready(function() { 
$(".test").click(function() { 
    if($(this).hasClass('red')) { 
     var next; 
     next = $(this).nextAll(".test"); 
     $('html, body').animate({ 
      scrollTop: next.offset().top 
     }, "slow"); 
    } else if($(this).hasClass('blue')) { 
     $(this).hide(); 
    } 
    return false; 
}); 
$('.test:last-child').removeClass('red').addClass('blue'); 

}）;

看看http://jsfiddle.net/adMYV/4/