jquery live（）click function：クラスが削除されていません

Question

フォームの送信後にjQueryを使用して成功メッセージを表示しています。フォームは、Wordpress Plugin 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) 
}); 

それだけdelayを内蔵し、完全removeを取り除くjQueryのを使用するようにしても良いでしょう。

$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'); 
}); 

Answer 2

要素をフェードアウトするコードはありません。それがうまくいかない理由は@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) 
    });