javascript - CSS 不适用于第一次点击使用 jQuery.post 提交，然后不会在后续点击时更新

Question

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

我有一个网站，您可以在其中将故事 URL 提交到数据库。当您单击提交按钮时，设置了一个 jquery post 请求调用我的 php，然后返回一个 json 对象，里面有一个 bool 值来指示它是否成功。

然后根据 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 似乎卡住了，直到后续单击才激活。此外，如果我先发送有效数据，然后在第二次单击“有效”css 时触发。

但是，如果我随后发送了错误数据，“It works”css 会再次触发，然后“Error”数据会触发。在那之后，无论我做什么，它只会触发“错误”css，即使我可以在控制台日志中进行验证，chrome js 调试器也会进入“if(!data.success)” block 的其他条件，这意味着它应该触发 '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) 从点击事件中删除 activatedClass 参数，或者 (2) 创建一个默认的 activatedClass 值。