add remove class jquery not working

Question

i am using the simple jquery addClass and removeClass function to toggle the class of the div on click but its not working. its working first time but second time its not working.

here is the jsfiddle link http://jsfiddle.net/chirag007/3xees0j8/

here is the jquery code.

$(".open-menu").click(function (e) { 
    $(".open-menu").addClass("close-menu1");
    $(".open-menu").removeClass("open-menu");
});

  $(".close-menu1").click(function (e1) {
      $(".close-menu1").addClass("open-menu");
      $(".close-menu").removeClass("close-menu1");
});

thanks for your help..

Just so you know, you could use toggleClass("open-menu close-menu1"); instead. jsfiddle.net/MelanciaUK/3xees0j8/5 — emerson.marini
– emerson.marini, Commented Aug 28, 2014 at 12:40
Since you are expecting the event handlers to change based on the changed classes you need to use event delegation — Arun P Johny
– Arun P Johny, Commented Aug 28, 2014 at 12:42
In last line $(".close-menu") your class is close-menu1 not close-menu. And also need to use delegate — Shail
– Shail, Commented Aug 28, 2014 at 12:47

JNF · Accepted Answer · 2014-08-28 12:43:10Z

7

It's not working because you aren't using delegation.

The jquery is attached to the elemnts which have the class (open-menu) on DOM ready (that's why the first click is working), but when the class (close-menu) is attached later dynamically it doesn't have the function attached to the event like here.

try

$(document).on("click", "<selector>", function(){
....
});

see updated fiddle

answered Aug 28, 2014 at 12:43

JNF

3,7403 gold badges35 silver badges65 bronze badges

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

Comments

Curtis · Accepted Answer · 2014-08-28 12:43:54Z

1

close-menu1 doesn't exist at the time you are creating the click event handlers.

You can change this to being a delegate to fix the solution, however a cleaner solution would be to have a class on the element which is never removed, and then detect which other classes are applied within the single event handler.

<div class="toggle-menu open-menu">menu</div>

$(".toggle-menu").click(function (e) {

    var $this = $(this);

    if ($this.hasClass("open-menu")){

        $this.addClass("close-menu1")
             .removeClass("open-menu");        
    }
    else
    {
         $this.addClass("open-menu")
              .removeClass("close-menu1");
    }    

    e.stopPropagation();
});

answered Aug 28, 2014 at 12:43

Curtis

104k69 gold badges280 silver badges359 bronze badges

Comments

Sudharsan S · Accepted Answer · 2014-08-28 12:44:51Z

1

Use event delegation and toggleClass in jquery

$(document).on("click", ".toggle-menu" ,function (e) { 

    $(this).toggleClass("open-menu close-menu1");

});

DEMO

answered Aug 28, 2014 at 12:44

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

Shail · Accepted Answer · 2014-08-28 12:52:14Z

1

Try this http://jsfiddle.net/s7hmv6kq/

$("body").on('click','.open-menu',function (e) { alert('b');
    $(".open-menu").addClass("close-menu1");
    $(".open-menu").removeClass("open-menu");
});

 $("body").on('click','.close-menu1',function (e1) {alert('a');
    $(".close-menu1").addClass("open-menu");
    $(".close-menu1").removeClass("close-menu1");
});

edited Aug 28, 2014 at 12:52

answered Aug 28, 2014 at 12:46

Shail

8734 silver badges16 bronze badges

Collectives™ on Stack Overflow

add remove class jquery not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related