css - jquery live() 点击函数 : class not being removed

Question

我使用 jQuery 在提交表单后显示一条成功消息。该表单是使用 wordpress 插件 Contact Form 7 创建的。类 wpcf7-mail-sent-ok 由插件 ajax 提交脚本动态添加。我试图做到这一点，以便当用户单击消息时，它会淡出然后消失。由于某些原因，removeClass 方法不起作用。

谁能看出它不应该工作的任何原因？超时功能确实有效，因为我使用“alert()”调用对其进行了测试。感谢您的帮助。

PS...我使用的是 LESS css，以便解释此处发布的 css 中的 .opacity() 语法。

HTML:

<div class="wpcf7-response-output wpcf7-mail-sent-ok"><div class="image"></div></div>

Jquery + CSS

        var $sent = $('.wpcf7-mail-sent-ok ');

        function remove() {$sent.hide().removeClass('wpcf7-mail-sent-ok hide').removeAttr('style')}

        $sent.live("click", function(){
            $(this).addClass('hide');
            setTimeout(remove,400)
        });

.wpcf7-response-output {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: transparent;
    opacity: 0;
    -moz-opacity: 0;
    .transition(opacity,.4s);
}

.wpcf7-response-output.wpcf7-mail-sent-ok .image {
    width: 400px;
    height: 138px;
    display: block;
    position: absolute;
    z-index: 2000; 
    top: 50%; 
    left: 50%; 
    margin: 0;
    background: url(assets/images/loading.png) no-repeat;
    background-size: 0 0;

    -webkit-transition: margin .4s ease-in-out;
    -moz-transition: margin .4s ease-in-out;
    -o-transition: margin .4s ease-in-out;
    -ms-transition: margin .4s ease-in-out;
    transition: margin .4s ease-in-out;

    -webkit-animation: pulse 400ms ease-out infinite alternate;
    -moz-animation: pulse 400ms ease-out infinite alternate;
    -o-animation: pulse 400ms ease-out infinite alternate;
    animation: pulse 400ms ease-out infinite alternate
}

.wpcf7-response-output.wpcf7-mail-sent-ok {z-index: 1000; background-color: rgba(255,255,255,.7); .opacity(1)}

.wpcf7-response-output.wpcf7-mail-sent-ok .image {
    height: 132px;
    position: absolute;
    margin: -66px 0 0 -200px;
    background-size: 100% 100%;
    background: url(assets/images/img-sent.png) no-repeat center center;
}

.wpcf7-mail-sent-ok.hide {.opacity(0); z-index: -1}

Answer 1

它不起作用，因为在定义函数 remove 时，$sent 的值已经被确定为一个不匹配的 jQuery 对象元素。这是因为匹配会在您编写时立即发生

var $sent = $('.wpcf7-mail-sent-ok '); 

目前还没有“邮件已发送”元素。

解决此问题的最简单方法是在 remove 中重新评估选择器:

function remove() {
    $('.wpcf7-mail-sent-ok').hide()
                            .removeClass('wpcf7-mail-sent-ok hide')
                            .removeAttr('style');
} 

另一种解决方案是在点击处理程序中使用 this 并将其作为参数传递给 remove:

function remove(el) {
    $(el).hide()
         .removeClass('wpcf7-mail-sent-ok hide')
         .removeAttr('style');
} 

$sent.live("click", function(){ 
    $(this).addClass('hide'); 
    setTimeout(function() { remove(this); },400) 
}); 

当然，使用 jQuery 的内置 delay 会更好并完全摆脱 remove:

$sent.live("click", function(){ 
    $(this).addClass('hide')
           .delay(400)
           .hide(0) // need to pass 0 as a parameter
           .removeClass('wpcf7-mail-sent-ok hide')
           .removeAttr('style');
});