jQuery addclass, removeclass and click event problems ( code )

Question

jQuery(document).ready(function () {
    jQuery('.isSocial').click(function () {
        var hidden = jQuery('.socialHidden');
        hidden.animate({
            "top": "35px"
        }, 400);
        jQuery(".socialHidden>div").delay(400).animate({
            opacity: "1"
        }, 150);
        jQuery(".isSocial").addClass("closejs").removeClass("isSocial");
        return false;
    });
    jQuery('.closejs').click(function () {
        var hidden = jQuery('.socialHidden');
        hidden.delay(200).animate({
            "top": "-176px"
        }, 400);
        jQuery(".socialHidden>div").animate({
            opacity: "0"
        }, 150);
        jQuery(".closejs").addClass("isSocial").removeClass("closejs");
    });
});

Can anyone help me fix this code? The first part works perfectly... When I try to get the second one working, it just does nothing.

This is the html:

    <button class="isSocial">BUTTON</button>
    <div class="socialHidden">
    <div>
    content.....
    </div>
    </div>

Anoop Joshi P · Accepted Answer · 2014-06-24 12:20:42Z

3

Since you are changing the classes dynamically, you should use event delegation for binding events,

jQuery(document).ready(function () {
    jQuery(document).on("click", '.isSocial', function () {
        var hidden = jQuery('.socialHidden');
        hidden.animate({
            "top": "35px"
        }, 400);
        jQuery(".socialHidden>div").delay(400).animate({
            opacity: "1"
        }, 150);
        jQuery(".isSocial").addClass("closejs").removeClass("isSocial");
        return false;
    });
    jQuery(document).on("click", '.closejs', function () {
        var hidden = jQuery('.socialHidden');
        hidden.delay(200).animate({
            "top": "-176px"
        }, 400);
        jQuery(".socialHidden>div").animate({
            opacity: "0"
        }, 150);
        jQuery(".closejs").addClass("isSocial").removeClass("closejs");
    });
});

answered Jun 24, 2014 at 12:20

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

2 Comments

Josh Beam Over a year ago

+1. To further expand, whenever you have dynamic elements (elements that are added by the user, or elements that change classes like above), the code that you wrote will not affect those elements, unless you delegate event handlers to parent elements (in this case, document is the explicit parent). This is because of the way event bubbling works (goes up then down, or down then up, through the DOM, depending on how you define your event listeners).

Anoop Joshi P Over a year ago

@JoshBeam thats a nice explanaion.

Collectives™ on Stack Overflow

jQuery addclass, removeclass and click event problems ( code )

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related