jQuery removeClass and addClass not working

Question

I have created a button and when the user clicks on it, the current class should be replaced with a new one and vice-versa. BUT addClass or removeClass, are both not showing any effect. I haven't seen any errors or warning msgs in console log.

JQuery code:

$('.vote_btn').click(function(){
  $.ajax({
        url:'/joseph/pages/votes.php',
        type: 'post',
        //dataType:'json',
        data:{'comment_id':$(this).data('commentid')},
        success: function(data){
          if(data == 'up'){
              $(this).removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
          } else if(data == 'reversed') {
              $(this).removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
          } else {
            alert(data);
          }
        }
  });
});

HTML Code:

<span id="<?=$comment['id']?>" class="fa fa-thumbs-o-up vote_btn" data-commentid="<?=$comment['id']?>" data-postid="<?=$getpost['post_id']?>" data-who="<?=$comment['commenter_id']?>"></span>

`$(this)` does not refer to what you think it does in the success function. — nicovank, Nov 22 '16 at 16:57

score 6 · Accepted Answer · edited Nov 22 '16 at 17:01

The jQuery object $(this) no longer refers to the clicked .vote_btn. Inside the success callback, store the clicked button in a variable and use this variable inside the callback :

$('.vote_btn').click(function(){
  var _this = $(this);

  $.ajax({
        url:'/joseph/pages/votes.php',
        type: 'post',
        //dataType:'json',
        data:{'comment_id':_this.data('commentid')},
        success: function(data){
          if(data == 'up'){
              _this.removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
          } else if(data == 'reversed') {
              _this.removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
          } else {
            alert(data);
          }
        }
  });
});

Hope this helps.

score 2 · Answer 2 · answered Nov 22 '16 at 17:00

2

Try this will work :

 $('.vote_btn').click(function(){
  var curEvent=$(this);
   $.ajax({
    url:'/joseph/pages/votes.php',
    type: 'post',
    //dataType:'json',
    data:{'comment_id':$(this).data('commentid')},
    success: function(data){
      if(data == 'up'){
          $(curEvent).removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
      } else if(data == 'reversed') {
          $(curEvent).removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
      } else {
        alert(data);
      }
    }
   });
   });

answered Nov 22 '16 at 17:00

SURJEET SINGH Bisht

881
10
16

1

Since you're storing `$(this)` in `curEvent`, there is no reason to re-wrap `curEvent` (i.e. `$(curEvent)` down below). Simply use `curEvent.removeClass(...)` in your callback function – War10ck Nov 22 '16 at 17:02
There is no need to re-wrap curEvent in a jQuery object in your callback. – mhodges Nov 22 '16 at 17:02
no in most of the cases it required. it depends browser to browser. and by wrapping this will work universally – SURJEET SINGH Bisht Nov 22 '16 at 17:03
Can you cite a source on that? I'm curious as to how the object would get "un-wrapped" inside of an ajax callback – mhodges Nov 22 '16 at 17:04
dont know exactly a case but i faced problem many times thats why i made this in practice that i will wrap it with $. though it is giving the same result but now i trust in wrapping – SURJEET SINGH Bisht Nov 22 '16 at 17:05

jQuery removeClass and addClass not working

2 Answers2