CSS在第一次点击jQuery.post提交时没有应用，然后在随后的点击中没有更新

我在这里不知所措，伙计们，我需要你们的帮助。

我有一个网站，你可以在那里提交故事网址到数据库。当你点击提交按钮时，一个jquery post请求被设置为调用我的php，然后返回一个json对象，里面有一个布尔值来指示它是否成功。

然后，根据php的成功，提交按钮使用一些花哨的css转换来向用户指示提交的状态。

我会做一个jfiddle给你们看，但我不知道如何模拟php发送回请求，因为这个网站只在我的本地机器上。

这是jquery：

function applySubmitFeedback(activatedClass) {
    $('#submit').click(function() {
        var self = this;
        $(this).addClass(activatedClass);
        setTimeout(function() {
            $(self).removeClass(activatedClass);
        }, 1000);
    });
}
$(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        var $form = $(this), 
            term = $form.find("input[name='url']").val(),
            url = $form.attr("action");
        $.post( url, { story_url:term }, function(data) {
            if (!data.success) {
                console.log("failed");
                if (typeof data.message == 'json' && data.message.hasOwnProperty("url"))
                    console.log(data.message.url);
                else
                    console.log(data.message)
                applySubmitFeedback('btn-error3d');
            else {
                console.log("success");
                applySubmitFeedback('btn-success3d');
            }
            console.log(data);
        }, "json");
    });
});

这是一个奇特的css：

.btn-8g {
    background: #fff;
    color: #999;
}
.btn-8g:active {
    background: #fff;
}
.btn-8g:after,
.btn-8g:before {
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    line-height: 70px;
}
.btn-8g:after {
    top: -98%; /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */
    background: #7aca7c;
    color: #358337;
    content: 'It worked!';
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(90deg);
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(90deg);
    -ms-transform-origin: 0% 100%;
    -ms-transform: rotateX(90deg);
    transform-origin: 0% 100%;
    transform: rotateX(90deg);
}
.btn-8g:before {
    top: 100%;
    background: #e96a6a;
    color: #a33a3a;
    content: 'Error!';
    font-weight: 700;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(-90deg);
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(-90deg);
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(-90deg);
    transform-origin: 0% 0%;
    transform: rotateX(-90deg);
}
.btn-8g.btn-success3d {
    background: #aaa;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: rotateX(-90deg) translateY(100%);
    -moz-transform-origin: 50% 100%;
    -moz-transform: rotateX(-90deg) translateY(100%);
    -ms-transform-origin: 50% 100%;
    -ms-transform: rotateX(-90deg) translateY(100%);
    transform-origin: 50% 100%;
    transform: rotateX(-90deg) translateY(100%);
}
.btn-8g.btn-error3d  {
    background: #aaa;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: rotateX(90deg) translateY(-100%);
    -moz-transform-origin: 50% 0%;
    -moz-transform: rotateX(90deg) translateY(-100%);
    -ms-transform-origin: 50% 0%;
    -ms-transform: rotateX(90deg) translateY(-100%);
    transform-origin: 50% 0%;
    transform: rotateX(90deg) translateY(-100%);
}

我的问题是，当我第一次点击提交按钮时，css似乎被卡住了，直到随后的点击才激活。此外，如果我先发送有效数据，然后在第二次单击"It works"css激发。

然而，如果我发送了错误的数据，"It works"css会再次触发，然后"Error"数据会触发。之后，无论我做什么，它都只会触发"Error"css，即使我可以在控制台日志中验证它是否进入了"if（！data.success）"块的else条件，这意味着它应该触发"applySubmitFeedback（'btn-success3d'）；"但它仍然像一个错误一样开火。

感觉这里有一个缓存问题，或者函数在jquery中不能像我想象的那样工作。请帮帮我。