jQuery animate with changing multiple class name doesnt work

Question

Could someone please have a look at this and tell me what I'm doing wrong. It's a span with class move.up on click the .content-wrapper element will move and the .move.up wil change class name to .move.dwn later the move.dwn.click(function() should start but I can never make it to that point, why?

 <style type="text/css">
    .content-wrapper {
        height:100px;
        width:100px;
        background-color:orange;
        position:relative;
    }
    span.move {
        background-color:fuchsia;
        cursor:pointer;
    }
</style>

<span class="move up">click here</span>
<div class="content-wrapper"></div>

<script type="text/javascript">
    $(document).ready(function() {

        $('.move.up').click(function() {
            alert("up");
            $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
            $(this).removeClass('up');
            $(this).addClass('dwn');
        });

        $('.move.dwn').click(function() {
            alert("dwn");
            $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
            $(this).removeClass('dwn');
            $(this).addClass('up');
        });
    });

</script>

see this api.jqueryui.com/switchClass

Shathish
– Shathish

2013-10-22 06:56:05 +00:00
Commented Oct 22, 2013 at 6:56 — Shathish
– Shathish, Commented Oct 22, 2013 at 6:56

Ben Felda · Accepted Answer · 2013-01-24 16:18:05Z

1

You are adding the click events before the item is in the dom. Add the click event listeners to a parent instead and they will execute when they bubble up.

$(document).ready(function() {
    $(document).on('click', '.move.up', function(){
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }).on('click', '.move.dwn', function(){
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});

answered Jan 24, 2013 at 16:18

Ben Felda

1,48210 silver badges16 bronze badges

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

Comments

adamdehaven · Accepted Answer · 2013-01-24 16:19:05Z

Since your $('.move.dwn').click(function() { is tied to the $('.move.dwn') element that may or may not exist on page load, you need to bind to a different element that IS available when the document loads. I'd change both functions as shown below

<script type="text/javascript">
$(function() {
    $(body).on('click', '.move.up', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $(body).on('click', '.move.down', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
 });
</script>

Uirri · Accepted Answer · 2013-01-24 16:19:09Z

1

What jQuery version are you using?

If you're using the 1.8 version this might help you:

$('.move').on("click", function() {
    if($(this).hasClass('up')) {
         $('.content-wrapper').animate({
            'left': '+=568px'
        }, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }
    else {
        $('.content-wrapper').animate({
            'left': '-=568px'
        }, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    }

});

Example (changed distance to 100 px to make it easier to see): http://jsfiddle.net/XWyZD/1/

answered Jan 24, 2013 at 16:19

Uirri

2731 silver badge11 bronze badges

Comments

Spork · Accepted Answer · 2013-01-24 16:19:23Z

0

Your problem lies in the .click() function not updating the elements they are tied to. Luckily jQuery has a solution for this in on() (previously live()). This will dynamically bind your events and after updates it will still select on class.

Try this:

<script type="text/javascript">
$(document).ready(function() {

    $('.move.up').on('click', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $('.move.dwn').on('click', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});

answered Jan 24, 2013 at 16:19

Spork

1,6311 gold badge23 silver badges39 bronze badges

2 Comments

adamdehaven Over a year ago

This does not work since your items are not necessarily in the DOM on page load. See my answer.

Spork Over a year ago

The items are necessarily on the DOM as per the example provided. Occam's razor will tell you that delegated event handling in this case is just killing a fly with a Hydrogen bomb.

Collectives™ on Stack Overflow

jQuery animate with changing multiple class name doesnt work

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related