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/