ajax 전후에 jQuery 함수가 이상하게 동작 함

Question

Ajax 요청 전후에 하나의 함수를 호출하려고합니다. 먼저 "loading"을 전달하면로드하는 gif가 표시됩니다. 아약스 성공시 성공 메시지를 전달하고이를 대신 표시합니다. 여기

내 JS/JQuery와

$.fn.loading_success = function(action) { 
      // action var is either "loading" or a success message 
     this.siblings('div.loading').remove(); 
     this.siblings('div.success').remove(); 

     console.log(action); 

     if(action == 'loading') { 
      this.after('div class="loading"> /div>'); // note this would actually be kosher html 
     } else { 
      this.after('div class="success">' + action + '/div>'); // like above, kosher html 
     } 

     return this; 

    } 

    $('.action').on('click', function(e) { 
     e.preventDefault(); 
     $(this).loading_success('loading'); 

    var dataPass = 'goodbye='+ 'world'; 
    $.ajax({ 
     type: "POST", 
     url: "/echo/json/", 
     data: dataPass, 
     cache: false, 
     success: function(){   
      var success_message = "We've got a winner!"; 
      $(this).loading_success(success_message); 
     } 
    }); 
    }); 

과 JSfiddle이 here입니다.

내 실제 AJAX 응답은 약간 다르게 보이지만 재 작성하여 jsfiddle에서 작동합니다.

이상한 점은 콘솔 로그에 예상되는 두 가지 응답이 표시된다는 것입니다. 나는 이것이 바보 같은 jquery 오류 인 것처럼 느낀다. 그러나 나는 그것에 대해 생각한다. 그러나 나는 혼란 스럽다.

Answer 1

사용 아약스 옵션 컨텍스트 :

와우 ... 완벽한 의미가 DEMO jsFiddle

$.ajax({ 
     context: this, //<< HERE! 
     type: "POST", 
     url: "/echo/json/", 
     data: dataPass, 
     cache: false, 
     success: function(){   
      var success_message = "We've got a winner!"; 
      // then in success callback, 'this' refers to clicked element 
      $(this).loading_success(success_message); 
     } 
    });