jQuery click not working after adding class but .on fires too soon to use

Question

I am adding a class to a div similar to below:

$("#mainPopup").click(function() {
    $('.myPopupBox').show();
    $(this).addClass('popupMinus');
});

And then later have this click function based on the class added dynamically above:

$('body').on('click', '.popupMinus', function () {
  $('.myPopupBox').hide();
  $(this).removeClass('popupMinus');
});

I know that I have to use .on because the class is being added dynamically. (here is the article I am referencing) but when I have this code above, it fires the show and then the hide all at once so nothing looks like it is happening.

Helpful information:

I do have everything is a document $(document).ready(function() { but I have tried putting the second function outside of it.
I tried playing with the order of the functions. Didn't make a difference.
If I don't include the second function (with the hide feature) then the first one with the show works perfectly.
I have tried using delays - doesn't help

I'm sure that I am doing something dumb but can't find anything online that helps.

Thanks!

Adjit · Accepted Answer · 2016-07-20 19:41:20Z

3

You are over complicating this. You don't need to have 2 separate events. You are clicking on one button, so leave it as one click function, and then use jQuery's .toggle() to toggle the elements visibility.

$(document).on('click', '#mainPopup', function(){
    $('.myPopupBox').toggle();
    $(this).toggleClass('popupMinus');
});

Documentation:

.toggle() - http://api.jquery.com/toggle/

.toggleClass() - http://api.jquery.com/toggleclass/

Note - it should also be noted that by using $(document).on() you do not need to wrap it inside $(document).ready()

answered Jul 20, 2016 at 19:41

Adjit

10.3k13 gold badges58 silver badges102 bronze badges

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

1 Comment

Kater89 Over a year ago

Thank you! That is much easier :) I figured it would be something easy like that.

ABE · Accepted Answer · 2016-07-20 21:53:27Z

1

The problem is that clicking calls to 2 functions, you have to merge them in one function. Like this:

$('body').on('click', '.popupMinus', function () {
  $('.myPopupBox').toggle();
  $(this).toggleClass('popupMinus');
});

edited Jul 20, 2016 at 21:53

answered Jul 20, 2016 at 19:41

ABE

7163 gold badges10 silver badges26 bronze badges

Collectives™ on Stack Overflow

jQuery click not working after adding class but .on fires too soon to use

2 Answers 2

Documentation:

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Documentation:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related