Why isnt this add and remove class not working in JQuery?

Question

Why is this not working? I'm going absolutely nuts.

            <span class="fav"></span>

            $('.fav').on('click', function() {
                $(this).addClass('item-selected');
            });

            $('.fav.item-selected').on('click', function() {
                $(this).removeClass('item-selected');
            });

BELOW IS FULL CODE. It's the second part that wont undo.

        $('.fav').on('click', function() {
            $(this).addClass('item-selected').next('span.notification').toggleClass('show-notification').html("Hello world!");
            setTimeout(function(){
                $('.show-notification').removeClass('show-notification');
            },4000);
        });

        $('.fav.item-selected').on('click', function() {
            $(this).removeClass('item-selected').next('span.notification').toggleClass('show-notification').html("Goodbye world!");
            setTimeout(function(){
                $('.show-notification').removeClass('show-notification');
            },4000);
        });

You cannot bind evetn directly to dynamically added element. You need its static parent. — Albert Einstein, Jun 06 '18 at 09:20
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Albert Einstein, Jun 06 '18 at 09:23

score 2 · Answer 1 · answered Jun 06 '18 at 09:20

As you state that the .fav element is dynamically appended to the DOM you need to use a delegated event handler. Also note that as you're toggling the class on successive clicks you don't need multiple handlers; you can just use toggleClass(). Try this:

$('#container').on('click', '.fav', function() {
  $(this).toggleClass('item-selected');
});

.item-selected {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <span class="fav">Item</span>
  <span class="fav">Item</span>
  <span class="fav">Item</span>
  <span class="fav">Item</span>
</div>

kiranvj · Answer 2 · 2018-06-06T09:32:50.603

2

It's the second part that wont undo.

This is because your selector .fav.item-selector returns no element

Try this

 $('.fav').on('click', function() {
      if($(this).hasClass('item-selected')) {
      $(this).removeClass('item-selected').next('span.notification').toggleClass('show-notification').html("Goodbye world!");
        setTimeout(function(){
            $('.show-notification').removeClass('show-notification');
        },4000); 
      }
   });

edited Jun 06 '18 at 09:32

answered Jun 06 '18 at 09:20

kiranvj

32,342
7
71
76

1

re-read edit, I think OP got confused, the span isn't dynamically created, the newly class is though ^^ – treyBake Jun 06 '18 at 09:27

score 1 · Answer 3 · answered Jun 06 '18 at 09:16

Because a span with the class item-selected isn't part of the original DOM, which is what jQuery works with. You need to make it more dynamic like this:

HTML:

<span class="fav target-click"></span>

jQuery:

$('.target-click').click(function()
{
    if ($(this).hasClass('item-selected')) {
        $(this).removeClass('item-selected')
    } else {
        $(this).addClass('item-selected')
    }
})

score 0 · Answer 4 · answered Jun 06 '18 at 09:34

Here is the working code thanks to the help receive in the answers provided.

            $(".job-listings").on('click', '.fav', function() {
                $(this).addClass('item-selected').next('span.notification').addClass('show-notification').html("Hello world!");
                setTimeout(function(){
                    $('.show-notification').removeClass('show-notification');
                },1000);
            });

            $(".job-listings").on('click', '.fav.item-selected', function() {
                $(this).removeClass('item-selected').next('span.notification').addClass('show-notification').html("Goodbye world!");
                setTimeout(function(){
                    $('.show-notification').removeClass('show-notification');
                },1000);
            });

score -1 · Answer 5 · answered Jun 06 '18 at 10:55

        function callBindEvents()
        {
           $('.fav').unbind('click');
           $('.fav').bind('click', function() {
              $(this).addClass('item-selected');
              callBindEvents();
           });

           $('.fav.item-selected').unbind("click");
           $('.fav.item-selected').bind('click', function() {
               $(this).removeClass('item-selected');
               callBindEvents();  
           });
       }
       $( document ).ready(function() {
        callBindEvents();
      })

First time when u were adding onclick events fav.item-selected was not exists. it was added later on, so you need to write onclick event after you added that class to div.

Why isnt this add and remove class not working in JQuery?

5 Answers5