函数调用之前调用ajax,jQuery函数调用之前和之后ajax行为怪异

我想在ajax请求之前和之后调用一个函数。首先，我通过“加载”并显示加载gif。在ajax成功之后，它会传递一条成功消息并显示它。jQuery函数调用之前和之后ajax行为怪异

这里是我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错误，我越想越想，但我很难过。