jQuery: addClass and click function for this class

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!

BeNdErR · Accepted Answer · 2013-11-02 15:01:30Z

1

Try like this:

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

CODE

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

answered Nov 2, 2013 at 15:01

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nir · Accepted Answer · 2013-11-02 15:01:27Z

0

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/

answered Nov 2, 2013 at 15:01

Nir

1,9825 gold badges26 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery: addClass and click function for this class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related