jQuery ajax не удалять счетчик при успешном завершении

Question

После успешного выполнения запроса ajax и сохранения данных в базе данных у меня проблема, когда я пытаюсь удалить active класс от кнопки. На клике я показываю spinner, и когда ajax заканчивается, я хочу удалить класс active. При запуске Spinner начинайте, но никогда не останавливайтесь. Я пытаюсь отладить его с alert() внутри success, и я получаю сообщение. Что может быть проблемой?

submiteComment: function() { 

     $("body").on("click", '.submit-comment', function(e) { 

      e.preventDefault(); 

      var post_id = $(this).data('post'); 
      var comment_text = $(".comment_text"); 

      if($.trim(comment_text).length) { 

       $(this).addClass('active'); 

       $.ajax({ 
        type: "post", 
        url: baseurl + '/comment/create', 
        data: {'post': post_id, 'comment_text': comment_text.val()}, 
        success: function() { 
         $(this).removeClass('active'); 
         alert("Success"); 
        } 
       }) 
      } 
     }); 
    }, 

И HTML:

<button type="submit" class="btn btn-xs btn-default submit-comment has-spinner" data-post="<?= $post->post_id;?>"> 
     <span class="spinner"><i class="fa fa-spinner fa-spin"></i></span> 
     Comment 
</button> 

Answer 1

Вы уверены, что this в $(this).removeClass('active'); равно ваш DOM элемента, когда ваш код выполняется? Похоже, что вам нужно переписать часть кода, как

success: (function() { 
        $(this).removeClass('active'); 
        alert("Success"); 
       }).bind(this) 

Answer 2

вы можете присвоить $ (это) как вар вне Аякса как

var $this = $(this); 
$this.addClass('active'); 

       $.ajax({ 
        type: "post", 
        url: baseurl + '/comment/create', 
        data: {'post': post_id, 'comment_text': comment_text.val()}, 
        success: function() { 
         $this.removeClass('active'); 
         alert("Success"); 
        } 
       })