jQuery：此類的addClass和click函數

Question

我設置了2個click函數，第一個允許您單擊並滾動.test div。 之后， .test:last-child的目標是刪除red類，添加blue類，然后在blue類div上觸發click函數，然后將其隱藏。 唯一的問題是，它似乎無法識別.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/

碼

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

Answer 2

您可以在.test選擇器上執行click事件。 並在用戶具有hasClass jquery函數的click函數事件中，在每種情況下都可以根據需要進行操作。

編輯：這樣：

$(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/