javascript - jQuery：这个类的addClass和click函数

Question

我设置了 2 个单击功能，第一个允许您单击并滚动浏览.testdiv。在此之后，.test:last-child目标是删除red类，添加blue类，然后在blue类 div 上触发单击功能，然后将其隐藏。唯一的问题是它似乎无法识别.bluediv 上的点击功能并且无法正常工作。
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 选择器上执行点击事件。并在单击功能事件中向用户 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/