Jquery - click handler when using toggleClass [duplicate]

Question

The issue is best described by example:

JS:

$(function () {
   $('.classA').on('click', function () { functionA() );
   $('.classB').on('click', function () { functionB() });
} 

var functionA = function()
{
    alert('I am function A');
    $('.classA, .classB').toggleClass('classA classB');
}

var functionB = function ()
{
    alert('I am function B');
    $('.classA, .classB').toggleClass('classA classB');
}

The problem is simply put but hard for me to fix: as expected, after pressing class A div, function A is called, class A is toggled to class B, but next time I press the same div, function A is still called, whereas I expect function B to be called then. I am doing something wrong ???

Just as a tip - This would suffice: .on('click',functionA);. The same for the other function. — emerson.marini
– emerson.marini, Commented Jun 23, 2016 at 17:23
You attached the event handler before the element received the new class. You need to look for delegation. — emerson.marini
– emerson.marini, Commented Jun 23, 2016 at 17:25
Your functions are missing the keyword function. E.g. function functionA () {... — j08691
– j08691, Commented Jun 23, 2016 at 17:26
Well, disregard this error, I've edited the question for the right syntax regarding keyword function. In my real code, everything is correct . — Edgar Navasardyan
– Edgar Navasardyan, Commented Jun 23, 2016 at 17:29
Have you noticed that you are missing the equal sign between var functionB function () ? — Franco
– Franco, Commented Jun 23, 2016 at 17:32

Community · Accepted Answer · 2017-05-23 12:08:26Z

3

You can delegate the event from the document to the element with the appropriate class then apply jQuery's toggleClass function to that event.

   $(document).on('click','.classA', function () { 
       alert('I am function A');
       $('.classA, .classB').toggleClass('classA classB');
    });

   $(document).on('click','.classB', function () { 
      alert('I am function B');
     $('.classA, .classB').toggleClass('classA classB'); 
    });

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jun 23, 2016 at 17:30

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

2 Comments

Edgar Navasardyan Over a year ago

This completely solved my question, but! It is partially off-topic, and yet if I write $(document).on('click','.classA', functionA() ); then functionA is triggered on document load event. This problem goes away if I change it to ....'.classA', function() {functionA()});

DinoMyte Over a year ago

That was just to give a direction on what you need to do. You can definitely change it based on your need.

Collectives™ on Stack Overflow

Jquery - click handler when using toggleClass [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related