CSS不適用於第一次使用jQuery.post提交的單擊，然后不應用於后續單擊的更新

Question

我在這里很茫然，我需要您的幫助。

我有一個網站，您可以在其中將故事URL提交到數據庫。 當您單擊提交按鈕時，設置了一個jQuery發布請求，調用我的php，然后返回一個json對象，並且內部有一個布爾值以指示是否成功。

然后，根據php的成功程度，submit按鈕使用一些精美的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似乎卡住了，直到隨后的單擊才激活。 另外，如果我先發送有效數據，則在第二次單擊“它起作用” css觸發。

但是，如果我隨后發送了錯誤的數據，則會再次觸發“它正常工作” css，然后觸發“錯誤”數據。 在那之后，無論我做什么，即使我可以在控制台日志和chrome js調試器中驗證它是否進入了if（！data.success）塊的else條件，它也只會觸發“錯誤” css。它應該觸發'applySubmitFeedback（'btn-success3d'）;' 但仍然會觸發，好像是一個錯誤。

感覺這里有一個緩存問題，或者功能在jquery中不起作用，就像我認為的那樣。 請幫我。

Answer 1

在我看來，您實際上並沒有在第一次點擊時添加任何類……只是添加了將在后續事件中添加類的點擊事件。

function applySubmitFeedback(activatedClass) {
    $('#submit').click(function() { // <--- this click event isn't bound until you click submit at least once
        var self = this;
        $(this).addClass(activatedClass); 
        setTimeout(function() {
            $(self).removeClass(activatedClass);
        }, 1000);
    });
}

我認為問題是：在$.post()完成之前，您在哪里獲取“ activatedClass”變量？ 當您完成ajax操作時，腳本會告訴該按鈕在下次有人單擊該按鈕時執行特定功能。 您必須先運行ajax，才能知道已激活的類。 解決方案可能是（1）從click事件中刪除activatedClass參數，或者（2）創建默認的activatedClass值。