jquery live () функция щелчка: класс не удаляется - PullRequest
Новая
       11

jquery live () функция щелчка: класс не удаляется

0 голосов
/ 22 января 2012

Я использую jQuery для отображения сообщения об успешном завершении после отправки формы. Форма создается с помощью контактной формы плагина wordpress 7. Класс wpcf7-mail-sent-ok динамически добавляется сценарием представления плагина ajax. Я пытаюсь сделать так, чтобы, когда пользователь нажимает на сообщение, оно исчезало, а затем исчезало. По какой-то причине метод removeClass не работает.

Кто-нибудь может увидеть причину, почему она не должна работать? Функция тайм-аута определенно работает, поскольку я протестировал ее с помощью вызова «alert ()». Спасибо за вашу помощь.

PS ... я использую LESS CSS, чтобы объяснить синтаксис .opacity () в CSS, опубликованном здесь.

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}

Ответы [ 2 ]

1 голос
/ 22 января 2012

Я не вижу никакого кода для затухания элемента. Причина, по которой он не работает, такая же, как упомянуто @Jon. Вы можете попытаться использовать анонимную функцию, и внутри этой функции this будет указывать на элемент, для которого click является триггером. Попробуйте это. 

    $('.wpcf7-mail-sent-ok ').live("click", function(){
        var $this = $(this).addClass('hide');
        setTimeout(function(){
            $this
            .hide()
            .removeClass('wpcf7-mail-sent-ok hide')
            .removeAttr('style')
        },400)
    });
1 голос
/ 22 января 2012

Это не работает, потому что в точке, где вы определяете функцию 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');
});
...