jQuery click function not working after updating class

Question

Once I change element's class using jQuery, the click function does not work on the new class.

Here is my code

jQuery('.close').on('click', function() {
    jQuery('div').slideUp();
    jQuery(this).addClass('open');
    jQuery(this).removeClass('close');
});


jQuery('.open').on('click', function() {
    jQuery('div').slideDown();
    jQuery(this).addClass('close');
    jQuery(this).removeClass('open');
});

You can try it here - http://jsfiddle.net/NkG9k/1/

Try clicking on the toggle button again. (it won't slidedown the div)

The reason I posted it as a comment as that it's not strictly the most efficient way to do it. It will work but I'm sure others will come up with a better solution. I would probably go with @Prog Mania and specify another selector to the element such as giving it an ID. — Dave Hogan
– Dave Hogan, Commented Aug 7, 2012 at 13:59

Adil · Accepted Answer · 2015-06-11 06:07:38Z

Try this, Apply on on document and use class filter to attach the event to your button.

Live Demo

jQuery(document).on('click','.close', function() {
    jQuery('div').slideUp();
    jQuery(this).addClass('open');
    jQuery(this).removeClass('close');
});


jQuery(document).on('click','.open', function() {
    jQuery('div').slideDown();
    jQuery(this).addClass('close');
    jQuery(this).removeClass('open');
});

You need to delegate event on static parent of the element you want this dynamic behavior so that when the class is changed (from open to close and from close to open) of an element the event is bind automatically on this element according to newly changed class.

Understanding Event Delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Prog Mania · Accepted Answer · 2012-08-07 13:54:07Z

1

you've removed the class that is triggering the event. you may give it an id and call it with id instead of class.

check this

    jQuery('#close').toggle( function() {
    jQuery('div').slideUp();
    jQuery(this).addClass('open');
    jQuery(this).removeClass('close');
},function() {
    jQuery('div').slideDown();
    jQuery(this).addClass('close');
    jQuery(this).removeClass('open');
});
<div id="close" class="close">toggle</div>

answered Aug 7, 2012 at 13:54

Prog Mania

6249 silver badges14 bronze badges

Comments

Logard · Accepted Answer · 2012-08-07 13:57:17Z

0

Try something like this:

$('.close').bind('click', function() {
 $('div').toggle();
});

If you need the animation you can check out this link

answered Aug 7, 2012 at 13:57

Logard

1,5131 gold badge13 silver badges27 bronze badges

Comments

Ümit KOL · Accepted Answer · 2012-08-07 13:57:44Z

0

if you want use to code below.

<button class="toggle">toggle</button> 
<div>THIS IS TEXT</div>


jQuery('.toggle').toggle( 
    function() {
        jQuery('div').slideUp();
    },
    function() {
        jQuery('div').slideDown();
    }
);

answered Aug 7, 2012 at 13:57

Ümit KOL

311 bronze badge

Comments

Mahmoud Abdelaziz · Accepted Answer · 2012-08-07 13:57:15Z

-1

You should use live event instead of click as live event works when the element is created

jQuery('.close').live('click', function() {
    jQuery('div').slideUp();
    jQuery(this).addClass('open');
    jQuery(this).removeClass('close');
});


jQuery('.open').live('click', function() {
    jQuery('div').slideDown();
    jQuery(this).addClass('close');
    jQuery(this).removeClass('open');
});

answered Aug 7, 2012 at 13:57

Mahmoud Abdelaziz

1171 gold badge1 silver badge9 bronze badges

3 Comments

Logard Over a year ago

jQuery live() is depreciated and should not ever be used.

M.ElSaka Over a year ago

@logard why live() is deprecated now?

Logard Over a year ago

"As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()." jQuery API

Collectives™ on Stack Overflow

jQuery click function not working after updating class

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related