jQuery：此类的addClass和click函数

Question

I have 2 click functions set up, the first one allows you to click and scroll through the .test divs. After this the .test:last-child is targeted to remove the red class, add the blue class and then fire a click function on the blue class div, and hide it. Only problem is it doesn't seem to recognise the click function on the .blue div and isn't working.
jsFiddle demo: 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;
    });
});

Any suggestions would be greatly appreciated!

Answer 1

Try like this:

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

CODE

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

Answer 2

You can do the click event on the .test selector. And in the click function event to user hasClass jquery function and act as you want in each case.

EDIT: Like this:

$(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');

});

Take a look http://jsfiddle.net/adMYV/4/